1、圆角：border-radius
- 1个：都一样 border-radius: 一样
- 2个：对角 border-radius: 左上&右下 右上&左下
- 3个：斜对角 border-radius: 左上 右上&左下 右下
- 4个：全部，顺时针 border-radius: 左上 右上 右下 左下
- border-radius: 1-4个数字 / 1-4个数字——前面是水平半径，后面是垂直半径border-radius: 10px/5px;
- 不给“/”则水平和垂直一样
2、边框
（1）边框图片：border-image
- border-image-sourceg 引入图片
- border-image-slice 切割图片
- border-image-width 边框宽度
- border-image-repeat 图片的排列方式：round 平铺,repeat 重复,stretch拉伸
（2）边框颜色 border-colors（火狐下）
3、线性渐变
（1）格式
- 线性渐变格式 linear-gradient([<起点> || <角度>] ?<点>, <点>…)
- 只能用在背景上
（2）参数
- 起点：从什么方向开始渐变
默认：top left（左上角）
- 角度：从什么角度开始渐变
xxx deg的形式（逆时针旋转）
- 点：渐变点的颜色和位置
black 50%，位置可选
（3）实例：background-image:-webit-linear-gradient(60deg,red 0,blue 40%,green 100%)
（4）平铺：background：-webit-repeating-linear-gradient(15deg,green ,green 10px,#fff 10px,#fff 20px,);
（5）兼容IE9以下:（gradientType=1为从左往右，0为从上往下）
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');
4、径向渐变
（1）格式
- 线性渐变格式 radial-gradient([<起点>]? [<形状> || <大小>]? <点>, <点>…)
（2）参数
- 起点：可以是关键字（left,top,right,bottom），具体数值或百分比
- 形状：ellipse（椭圆）、circle（圆形）
-
大小 :具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;
注意：firefox目前只支持关键字
- 点：渐变点的颜色和位置
black 50%，位置可选
5、背景
（1）多背景：逗号分开 background: url(a.jpg) 0 0, url(b.jpg) 0 100%;
（2）背景尺寸：background-size:x y
- background-size:100% 100%
- Cover 放大
- Contain 缩小
（3）背景原点：background-origin ： border | padding | content
- border-box： 从border区域开始显示背景。
- padding-box： 从padding区域开始显示背景。
- content-box： 从content区域开始显示背景。
（4）背景裁剪：background-clip： border | padding | content|no-clip
- border-box： 从border区域向外裁剪背景。
- padding-box： 从padding区域向外裁剪背景。
- content-box： 从content区域向外裁剪背景。
- text： 从文本区域向外裁剪背景。（仅支持webkit内核浏览器）
6、遮罩
- Mask-image
- Mask-position
- Mask-repeat