css3 新增的边框属性

1、border-radius
2、box-shadow
3、border-image

浏览器支持：

Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。
Firefox、Chrome 以及 Safari 支持所有新的边框属性。
注释：对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。

Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-。

border-radius：

语法

border-radius: 1-4 length|% / 1-4 length|%;

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

css ：

#border{
width: 200px;
height: 30px;
border:1px solid red;
border-radius: 10px; // 也可以是百分比，
text-align: center;
line-height: 30px;

}

html：

border-radius

效果：

box-shadow

语法

box-shadow: h-shadow v-shadow blur spread color inset;

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

css ：

#border{
width: 200px;
height: 30px;
border:1px solid red;
border-radius: 10px;
box-shadow: 10px 10px 5px #888888;
text-align: center;
line-height: 30px;

}

html：

border-radius

效果：

border-image

定义和用法

border-image 属性是一个简写属性，用于设置以下属性：

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

如果省略值，会设置其默认值。

html：

在这里，图片铺满整个边框。

这是我们使用的图片：

css：

div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}

#round
{
-moz-border-image:url(/i/border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round; /* Opera */
border-image:url(/i/border.png) 30 30 round;
}

效果：

如果改成border-image:url(/i/border.png) 30 30 stretch;

那效果如下：