利用CSS3的新功能实现(椭)圆角边框和图片边框
网上现在有很多使用CSS实现的圆角边框,但这些方法都是比较复杂的,现在,CSS3标准提供实现圆角边框、椭圆角边框和图片边框的简单方法。CSS3关于边框的定义中新加入了border-radius和border-image属性实现这些功能。CSS3的边框模块定义的属性有:
属性名属性值borderborder-width | border-style | border-colorborder-topborder-top-width | border-top-style | border-top-colorborder-top-widthnumber | thin | medium | thickborder-top-stylenone | hidden | dotted | dashed | solid | double | groove | ridge | inset | outsetborder-top-colorcolorborder-rightborder-right-width | border-right-style | border-right-colorborder-right-widthnumber | thin | medium | thickborder-right-stylenone | hidden | dotted | dashed | solid | double | groove | ridge | inset | outsetborder-right-colorcolorborder-bottomborder-bottom-width | border-bottom-style | border-bottom-colorborder-bottom-widthnumber | thin | medium | thickborder-bottom-stylenone | hidden | dotted | dashed | solid | double | groove | ridge | inset | outsetborder-bottom-colorcolorborder-leftborder-left-width | border-left-style | border-left-colorborder-left-widthnumber | thin | medium | thickborder-left-stylenone | hidden | dotted | dashed | solid | double | groove | ridge | inset | outsetborder-left-colorcolorborder-radiusnumber | %{1,4} [/number | %{1,4}]??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;。
下面我们就例子讲解这些用法。
关于圆角边框、椭圆角边框:
?