乐趣区

关于css:day17-阴影-背景图-响应式布局

1. 盒子暗影

  • box-shadow: 程度偏移 垂直偏移 暗影含糊大小 暗影大小 暗影色彩 暗影地位 (inset: 外面);
  • 程度及垂直 向右和向下为负数, 反之为正数

2. 文本暗影

  • text-shadow: 程度偏移 垂直偏移 暗影含糊大小 暗影色彩
  • 值的特点和盒子暗影一样

3. 背景图大小

  • background-size: 宽度 高度;
  • 属性值:

    • 数值 +px
    • 百分比
    • 关键字

      • cover 图片一直被拉伸, 直到充斥整个盒子, 可能会呈现背景图被裁掉
      • contain 图片一直被拉伸, 直到碰到盒子某个边缘之后就进行拉伸, 可能会呈现留白

4. 背景图裁切

  • background-clip

    • border-box 从边框之外裁切
    • padding-box 从 padding 区域开始裁切
    • content-box 从内容区域开始裁切
  • 不须要去反复

5. 背景图原点

  • background-origin

    • padding-box 从 padding 区域开始显示
    • border-box 从边框区域开始显示
    • content-box 从内容区开始显示

6. 背景图的固定

  • background-attachment: scoll(滚动)/fixed(固定) 背景图固定, 内容滚动

7. 圆角

  • border-radius

    • 个别设置 50%, 实现圆形
    • 一个值: 周围
    • 两个值: 对角
    • 三个值: 左上 对角 右下
    • 四个值: 顺时针

8. 响应式布局

依据不必的设施分辨率 显示不同的款式

  • 长处: 适配性好, 高级
  • 毛病: 工作量大, 繁琐, 实用于小网站
  • 媒体查问

    @media 设施类型 and (媒体个性){

    选择器 {

    ​ 款式

    ​ }

    ​ }

设施类型: all(全副)/screen(显示器)

媒体个性: max-width/min-width

  • 写法留神:

    • 1) and 两边必须有空格
    • 2) 媒体个性前面不要加分号
    • 3) 多个媒体个性之间用 and 连贯
退出移动版