css3边框线border

边框（border）

在网页中我们最常见的一种css3样式莫过于边框圆角了，边框圆角是的网页整体更加美观，我们当然想要我们的页面更加的美观，所以我们一起来看看这个属性。

	border-radius: 5px;

我们设置边框圆角值为5px，如上图所示，当然这个只是一个简写的方法

	border-radius: 5px 10px;

这样的写法就是代表着左上和右下为5px，右上和左下的为10px，当然这样还是简写，再次还原看看

	border-radius: 5px 10px 20px 30px;

这样的写法分别设置了四个角的不同的弧度，也可以分开设置每个小的弧度。

	border-top-left-radius：5px
	左上角的边框圆角
	border-top-right-radius：5px
	右上角的边框圆角
	border-bottom-left-radius：5px
	左下角的边框圆角
	border-bottom-right-radius：5px
	右下角的边框圆角

最原始的写法

	border-radius：10px 20px 30px 40px / 20px 20px 30px 40px

此时四个角的边框圆角分别为：10px,20px 20px,20px 30px,30px 40px,40px

边框阴影（box-shadow）

//box-shadow: h v blur spread color;
box-shadow: inset 3px 3px 5px 0px #000;

spread:阴影外延值 正值四周放大 负值四周收缩
blur：以当前阴影的边框进行内外模糊不写就是outset，

• inset 内阴影
• outset 外阴影；默认值不设置，设置后失效。
• 可以设置多层阴影

边框图片（border-image）

border-image-source
设置边框图片路径
border-iamge-slice
设置边框图片切割的位置
border-image-slice: 25% 30% 12% 20% fill;

图中1，2，3，4所切割出来的图像分别对应着元素的四个角；5，6，7，8所切割的图像分别对应着四个方向的border；fill关键字非必填，填写则代表元素的content的背景图像为被切割的9。

设置图片平铺的效果（border-image-repeat）

stretch：拉伸
round：环绕式拉伸
repeat：平铺 不会拉伸背景图，见缝插针
space：平铺 不会拉伸图片，使用空白位置代替

复合语法

// border-iamge：source slice repeat
border-image: url(image.png) 100 round;