边框图片、边框圆角、边框阴影、线性渐变、径向渐变

圆角边框使用border-radius实现圆角

border-radius: 100px;		/*一个值表示四个角是一样的大小*/
border-radius: 50px 30px;		/*两个值：第一个表示左上，第二个表示右上，左下对应右上，右下对应左上*/
border-radius: 100px 50px 30px;	/*三个值：第一个表示左上，第二个表示右上，第三个表示右下。左下与右上对应*/
border-radius: 50px 10px 30px 40px;		/*四个值：分别对应左上，右上，右下，左下*/

可分别设置长、短半径，以“/”进行分隔，遵循“1，2，3，4”规则，“/” 前面的 1~4 个用来设置横轴半径（分别对应横轴 1、2、3、4 位置 ），“/”后面 1~4 个参 数用来设置纵轴半径（分别对应纵轴 1、2、3、4 位置 ）
边框阴影
通过box-shadow 与 text/shadow ，两者用法差不多
1、 水平偏移量 正值向右 负值向左；
2、垂直偏移量 正值向下 负值向上；
3、box-shadow: 5px 5px 27px red, -5px -5px 27px green; 表示双重阴影，只有box-shadow有。text/shadow没有双重阴影
4、模糊度是不能为负值；
5、inset 可以设置内阴影；
box-shadow: inset 5px 5px 27px red, -5px -5px 27px green
6、设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边 框阴影，实现更好的效果，增强立体感。
边框图片
border-image 设置边框的背景图片
border-image-source:url(“”) 设置边框图片的地址.
裁剪图片，如何去裁切图片，浏览器会自动去裁剪图片. border-imageslice:27,27,27,27 ||27表示被切割图片的四个角的位置根据选用图片调整
指定边框的宽度. border-image-width:20px;
边框平铺的样式 stretch 拉升 round 会自动调整缩放比例 repeat(重复).
渐变
渐变是CSS3 当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果， 有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。 可分为线性渐变、径向渐变。
线性渐变（background: linear-gradient();）
linear-gradient 线性渐变指沿着某条直线朝一个方向产生渐变效果。
background: linear-gradient(to right,red,yellow,green);

to right 表示方向 (left、top、right、left、也可以使用度数，度数单位deg)
red表示线性渐变开始颜色
green表示线性渐变结束颜色
线性渐变的另外一种效果及写法

background: linear-gradient(135deg,
				red 0%,
				red 25%,
				green 25%,
				green 50%,
				blue 50%,
				blue 75%,
				yellow 75%,
				yellow 100%); 

注意：属性值使用英文逗号隔开

径向渐变（background:radial-gradient();）
radial-gradient 径向渐变指从一个中心点开始沿着四周产生渐变效果

background:radial-gradient(at center,red,yellow,blue);

第一个值表示渐变中心点位置
第一个值前面加像素（20px）表示辐射范围。这两个属性值之间使用空格链接
at后面使用像素（at 10px 60px）也表示辐射中心点的位置