一、盒子阴影和文字阴影
box-shadow;
盒子阴影 ie9
语法：
box-shadow:1px 2px 3px 4px color;
5个参数：
参数一：水平偏移量 +- 必选
参数二：垂直偏移量 +- 必选
参数三：阴影模糊值 + 必选
参数四：阴影外延值 + 可选
参数五：阴影的颜色 color 必选
外延值可以省略
一个盒子可以有多个阴影
box-shadow:0px 0px 12px red, 2px 2px 3px 3px orange;
设置内阴影：默认阴影都是外阴影
inset
box-shadow:inset 0 0 32px 10px red;
text-shadow:
文本阴影
4个参数，没有外延值 ie10
text-shadow :1px 1px 1px red;
二、图片边框 ie10
border-image 设置图片边框
border-image:border-image-source || border-image-slice[/border-image-width?[/border-image-outset]?]? || border-image-repeat
border-image-source:用于设置图片边框的路劲
border-image-slice:图片边框向内的偏移量
border-image-图片边框的宽度
border-image-outset:图片边框图像区域超出边框的偏移量
border-image-repeat:指定图片边框背景填充方式
stretch | repeat | round
stretch：默认的，拉伸填充
repeat：指定平铺填充背景图片，当遇到边界时，被剪断
round：指定平铺填充背景图片，会根据边框的尺寸，动态调整图片的大小，直到图片的大小刚好能够填充整个边框
三、背景background
如果没有渐变的时候，我们可以使用渐变的图片进行横向平铺实现渐变的效果
CSS3中有一个特殊方法可以实现渐变， ie9开始兼容
语法：
background-image:-webkit-linear-gradient(top,red,blue)
-webkit-:谷歌等谷歌内核浏览器的前缀
-moz-：火狐前缀
-ms-:ie前缀
-o-:欧朋前缀
1.线性渐变
-webkit-linear-gradient(top,red,blue);
参数1：top 从上到下渐变
bottom： 从下到上渐变
right 从左到右渐变
left 从右到左渐变
top-left 左上渐变到右下
45deg 角度
30px 值
参数2：从哪个颜色开始渐变 20%表示从20%的位置开始渐变为红色
参数3：渐变到哪个颜色 60%表示从60%开始渐变为蓝色
参数1使用角度时：
使用谷歌、火狐、ie、欧朋等标准浏览器时，水平向左为0deg，向下是90deg；
如果不加前缀，使用w3c的标准 ，向下是0deg，向左是90deg
通常不使用角度进行渐变，一般是方位词
2.径向渐变
-webkit-radius-gradient()
径向渐变起点一般使用px值
-webkit-radius-gradient(100px 80px,red,blue,green);
3.文字渐变
文本填充颜色，-webkit-text-fill-color: 不支持ie，只能支持-webkit-内核的浏览器
背景切割(文本进行切割)
-webkit-background-clip:text;不支持ie，只能支持-webkit-内核的浏览器