CSS——布局样式：背景图扩展样式、渐变、字体图标、文字阴影、盒子阴影、遮罩、倒影...

背景图扩展样式
　　background-size 　　 背景图大小
　　　　cover:　　覆盖
　　　　contain:　　包含
　　background-origin:　　背景图的填充位置
　　　　padding-box 　　默认
　　　　border-box
　　　　content-box
　　background-clip:　　背景图的裁切方式
　　　　padding-box
　　　　border-box(默认)
　　　　content-box
　　复合样式时：background-origin(在前) background-clip(在后)
　　//background-position 为每一个背景图片设置初始位置。 这个位置是相对于由 background-origin 定义的位置图层的。

CSS3渐变：
　　linear-gradient:　　线性渐变
　　　　point(to right;to bottom...) || angle(45deg;-32deg)
　　　　color
　　　　percentage
　　radial-gradient:　　径向渐变
　　　　point
　　　　color
　　　　percentage
　　注：
　　　　1、线性渐变：linear-gradient是值，需要添加到background-image属性上。
　　　　2、线性渐变的0deg是在页面的下面，正值按顺时针旋转，负值按逆时针旋转

字体图标
　　font-face是CSS3中的一个模块，它主要把自己定义的web字体嵌入到你的网页中。
　　好处：
　　　　1、可以非常方便地改变字体颜色和大小
　　　　2、放大后不会失真
　　　　3、减少请求次数和提高加载速度
　　　　4、简化网页布局
　　　　5、减少设计师和前端工程师的工作量
　　　　6、可使用计算机没有的字体
　　使用：
　　　　@font-face语法：
　　　　　　像.woff等文件都是做兼容处理的

　　阿里巴巴矢量图标库：
　　　　https://www.iconfont.cn 提供了大量免费的字体图标

　　自定义字体图标：
　　　　https://icomoon.io/app: 在线生成字体图标

文字阴影：
　　text-shadow:
　　　　x,y 坐标
　　　　blur(10px等等) 模糊
　　　　color 颜色
　　多阴影 通过","的方式隔开，可以设置多阴影
　　注：阴影的默认颜色是跟文字样色相同的

盒子阴影：
　　box-shadow:
　　　　x,y
　　　　blur
　　　　spread 　　 阴影的范围
　　　　color
　　　　inset 　　 内阴影，默认的是外阴影，如何设置outset反而不起作用，可选的值只有inset表示内阴影
　　　　多阴影
　　注：盒子阴影的默认样色是黑色

遮罩：
　　mask:
　　　　url
　　　　repeat
　　　　x,y
　　　　w
　　　　h
　　　　多遮罩
　　注：mask并未标准化，需要添加浏览器前缀
　　默认是x,y都平铺(repeat)

倒影：
　　box-reflect:
　　　　above 上面
　　　　below 下面
　　　　left 左面
　　　　right 右面
　　　　距离
　　　　遮罩 | 渐变（渐变只是透明度的渐变而不是颜色的渐变）

模糊与计算：
　　blur　　 模糊
　　　　filter:blur()
　　calc
　　　　四则计算

分栏布局：
　　column-count:　　分栏的个数
　　column-width:　　分栏的宽度
　　column-gap:　　分栏的间距
　　column-rule:　　分栏的边线
　　column-span:　　合并分栏

　　注：column-count和column-width不要一起设置