CSS3中border属性有几个非常重要的子属性，本文来逐步说明。
border-image
CSS3中可以通过border-image来设置边框的背景图片，同时还有几个相关的子属性来配合使用。
属性列表：
border-image-source:用在边框的图片路径border-image-slice:图片边框向内偏移量border-image-width:图片边框的宽度border-image-outset:图片边框区域超出边框的量border-image-repeat:图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)
这些属性可以简写在border-image中，实例如下：
1
2
3
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round;/* Ghrome and Safari */
-o-border-image:url(border.png) 30 30 round /* Opear */
border-radius
border-radius用于给元素添加圆角边框。border-radius有四个分属性，分别是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius，按照顺时针顺序，从左上角、右上角、右下角、左下角。
常见写法：
1
border-radius: 25px;
解释：这种写法，是指四个角的圆弧水平和垂直半径都是25px，也就是说这个角是1/4个圆弧。
等价于这种写法：
1
2
3
4border-top-left-radius:25px 25px;
border-top-right-radius:25px 25px;
border-bottom-right-radius:25px 25px;
border-bottom-left-radius:25px 25px;
border-radius:left right;
如果right的值为空，则跟left值一样。
border-radius还有一种写法是以#’/‘来区分，前面是四个角的水平半径，后面是四个角的垂直半径
1
border-radius: 25px 25px 10px 20px / 25px 25px 10px 20px;
此种写法等价于：
1
2
3
4border-top-left-radius:25px 25px;
border-top-right-radius:25px 25px;
border-bottom-right-radius:10px 10px;
border-bottom-left-radius:20px 20px;
如果border-radius采用水平半径和垂直半径分开的写法：
只写了两个值：则top-left和bottom-right共用前一个值，top-right和bottom-left共用后一个值
只写了三个值：则top-left和bottom-right分别采用第一个和最后一个值，中间的值由top-right和bottom-left共用
只写了一个值：则四个角共用 一个值
写了四个值，则四个角按照top-left、top-right、bottom-right、bottom-left的顺序取值
box-shadow
box-shadow用来向边框添加一个或多个阴影。
语法如下：box-shadow: h-shadow v-shadow blur spread color inset;
注释 : box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
解释：
h-shadow: 必需。水平阴影的位置，允许负值。v-shadow: 必需。垂直阴影的位置，允许负值。blur: 可选。模糊距离。spread: 可选。阴影的尺寸。color: 可选。阴影的颜色。inset: 可选。将外部阴影(outset)改为内部阴影。
常见写法：
1 | box-shadow:10px 10px 10px #aaaaaa; |