[CSS3.0] CSS-边框

border-radius属性:

定义: 为元素添加圆角边框;
语法: border-radius: 1-4 length|% / 1-4 length|%;
JavaScript语法: object.style.borderRadius="5px";
详细: border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性;
示例:
div {
    border:2px solid;
    border-radius:25px;
}

注释：按此顺序设置每个 radius 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

值	描述
length	定义圆角的形状
%	以百分比定义圆角的形状

box-shadow属性:

定义: 给边框添加一个或多个阴影
语法: box-shadow: h-shadow v-shadow blur spread color inset;
JavaScript语法: object.style.boxShadow="10px 10px 5px #888888"
详细:
示例:
div {
    box-shadow: 10px 10px 5px #888888;
}

值	描述
h-shadow	必需. 水平阴影的位置. 允许负值
v-shadow	必需. 垂直阴影的位置. 允许负值
blur	可选. 模糊距离
spread	可选. 阴影的尺寸
color	可选. 阴影的颜色
inset	可选. 将外部阴影(outset)改为内部阴影

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

border-image属性:

定义: 边框设置为图片
语法: 
JavaScript语法: object.style.borderImage="url(border.png) 30 30 round"
详细:
border-image 属性是一个简写属性，用于设置以下属性：
    border-image-source
    border-image-slice
    border-image-width
    border-image-outset
    border-image-repeat
示例:
{
    border-image:url(border.png) 30 30 round;
}

值	描述
border-image-source	用在边框的图片的路径
border-image-slice	图片边框向内偏移
border-image-width	图片边框的宽度
border_image-outset	边框图像区域超出边框的量
border-image-repeat	图像边框是否超出边框的量

来源：oschina

链接：https://my.oschina.net/u/2265030/blog/548889