css3 新增的边框属性

1、border-radius2、box-shadow3、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：

<div id="border"> border-radius

</div>

效果：

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：

<div id="border"> border-radius

</div>

效果：

border-image

定义和用法

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

border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat

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

html：

<div id="round">在这里，图片铺满整个边框。</div>

<p>这是我们使用的图片：</p><img src="/i/border.png">

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;

那效果如下：