1.圆角
border-radius: ;
可以取1-4个值
单位px %
画圆：border-radius:50%
两边半圆：border-radius:0 height/2px
2.阴影
- 盒阴影
box-shadow:水平方向阴影偏移的位置 垂直方向阴影偏移的位置 模糊度 阴影尺寸 颜色 位置
必须 必须 可选 可选 可选 可选
正负 正负 正值 正负
outset（外部阴影）|inset（变为内阴影）
- 字阴影
text-shadow:水平方向阴影偏移的位置 垂直方向阴影偏移的位置 模糊度 颜色；
必须 必须 可选 可选
正负 正负 正值
3.背景渐变
- 属性
background-image:；
- 线性渐变
background:linear-gradient(方向,颜色1,颜色2,);
注意：第一个参数可以省略，默认从上往下渐变
第一个参数取值：关键词 和 角度（deg：弧度）
①关键词
to right
to left top
②弧度
直接写角度
3）径向渐变 射线渐变 扇形渐变
background-image:-webkit-radial-gradient（渐变的中心点，渐变的形状，颜色1，颜色2...）;
注意
第一个参数和第二个参数可以省略，默认中心点在元素的正中心（宽高的一半），渐变的形状为椭圆
渐变的中心点可以取值关键词
渐变的形状可以取值circle（正圆）
径向渐变有兼容性问题
4.兼容性
- 厂商前缀 解决浏览器对C3新特性的支持
浏览器 厂商前缀 内核
谷歌 -webkit- blink
苹果 -webkit- webkit
欧朋 -o- blink
火狐 -moz- gecko
IE -ms- trident
- css hack 解决IE低版本
①条件hack
和html写在同一个位置
<!--[if 条件]>
<![endif]-->
条件
IE版本
gt IE 版本 大于
gte IE 版本 大于等于
lt IE 版本 小于
lte IE 版本 小于等于
②属性前缀和后缀
前缀 + - _ * #
后缀 \0 \9 \9\0 !important（优先级最高）
