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连贯