CSS3尝鲜（三）：利用CSS3的新功能实现（椭）圆角边框和图片边框

网上现在有很多使用CSS实现的圆角边框，但这些方法都是比较复杂的，现在，CSS3标准提供实现圆角边框、椭圆角边框和图片边框的简单方法。CSS3关于边框的定义中新加入了border-radius和border-image属性实现这些功能。CSS3的边框模块定义的属性有：

属性名 属性值

border	border-width | border-style | border-color
border-top	border-top-width | border-top-style | border-top-color
border-top-width	number | thin | medium | thick
border-top-style	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-top-color	color
border-right	border-right-width | border-right-style | border-right-color
border-right-width	number | thin | medium | thick
border-right-style	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-right-color	color
border-bottom	border-bottom-width | border-bottom-style | border-bottom-color
border-bottom-width	number | thin | medium | thick
border-bottom-style	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-bottom-color	color
border-left	border-left-width | border-left-style | border-left-color
border-left-width	number | thin | medium | thick
border-left-style	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-left-color	color
border-radius	number | %{1,4} [/number | %{1,4}]? border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
border-top-left-radius	number | %
border-top-right-radius	number | %
border-bottom-right-radius	number | %
border-right-left-radius	number | %
border-image	border-image-source border-image-slice border-image-width border-image-outset border-image-repeat
border-image-source	none | url
border-image-slice	[% | number]{1,4} && fill?
border-image-width	[length | % | number | auto]{1,4}
border-image-outset	[length | number]{1,4}
border-image-repeat	[stretch | repeat | round | space | none]{1,2}
border-collapse	collapse | separate
box-break	continuous | each-box
box-shadow	inset | [length,length,length,length | color] | none

border-radius 在元素四角的位置形成四分之一大小的椭圆圆角。如果没有边框，即边框宽度为0，则背景的圆角依然存在。这个属性采用值 a/b 的形式表示，其中a代表水平方向半径，b代表垂直方向的半径。这2个值可以是一个长度值，也可以是百分比，百分比是对于元素宽度的大小来计算的。 border-radius是一个简写的形式，它同时代表四角的椭圆角的大小，按照 top-left, top-right, bottom-right, bottom-left 的顺序进行设置。注意：Firefox中的写法是这样的：-moz-border-radius-topleft、-moz-border-radius-topright、-moz-border-radius-bottomright 、 -moz-border-radius-bottomleft。
例如：border-radius：10px 等同于 border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius: 10px;border-bottom-left-radius:10px;。

下面我们就例子讲解这些用法。

关于圆角边框、椭圆角边框：

如果设置一个值，则四角的水平和垂直半径就是10px，如果没有边框，则背景依然是圆角。本例子的样式：
-moz-border-radius:10px;border-radius:10px;border-width:2px 2px 0 0;background-color: rgb(255, 239, 217);

如果设置两个个值，则第一个值代表top-left和bottom-right，第二个值代表top-right 和 bottom-left，也就是对角的相同。本样式的代码是：
-moz-border-radius:10px 20px;border-radius:10px 20px;

如果设置3个值，则第二个值代表的是 top-right和bottom-left。本样式的代码是：
-moz-border-radius:10px 20px 40px;border-radius:10px 20px 40px;

如果是四个值，则按 top-left, top-right, bottom-right, bottom-left的顺序设置。 另外需要注意：采用Webkit引擎的浏览器如 Chrome、Safari和搜狗浏览器（具体没测试），这些写法没有完全支持，-webkit-border-radius 只支持一个值或者设置2个值，代表椭圆的两个半径。

采用Webkit引擎的浏览器的样式与 Fireofx 不同，这个相同的效果采用的样式则是这样的：
-webkit-border-radius:10px 20px;-moz-border-radius:10px / 20px

单独设置一个圆角的写法：
-webkit-border-top-right-radius: 20px;-moz-border-radius-topright: 20px;border-top-right-radius: 20px;

关于图片边框：

border-image ：是 border-image-source border-image-slice border-image-width border-image-outset border-image-repeat的简写形式；
border-image-source ：设置图片的地址。如果设置none，则不显示边框图片，将显示其他样式设置；
border-image-slice ：设置从图片的top, right, bottom, left四个边缘向内的偏移量。如果设置为百分比，则是指向对于图片尺寸的大小的。水平方向向对于图片的宽度，垂直发现向对于图片的高度。如果设置为数字，则是只图片坐标的大小。fill指最中间一部分被保留。
border-image-width ：设置边框的宽度 border-image-repeat：设置缩放和平铺方式

下面就是一个简单的例子：

使用边框图片的例子，不过，这个样式3个浏览器看到的效果个不相同，看来这些属性浏览器支持的还不是很好。本样式代码：
-moz-border-image:url(http://dotnet.aspx.cc/Images/copyright.gif) 16 16 round stretch;-webkit-border-image:url(http://dotnet.aspx.cc/Images/copyright.gif) 16 16 round stretch;border-width:16px

以上所有例子的效果如下：