首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

利用CSS3的新功能兑现(椭)圆角边框和图片边框

2012-11-03 
利用CSS3的新功能实现(椭)圆角边框和图片边框网上现在有很多使用CSS实现的圆角边框,但这些方法都是比较复

利用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-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radiusborder-top-left-radiusnumber | %border-top-right-radiusnumber | %border-bottom-right-radiusnumber | %border-right-left-radiusnumber | %border-imageborder-image-source border-image-slice border-image-width border-image-outset border-image-repeatborder-image-sourcenone | urlborder-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-collapsecollapse | separatebox-breakcontinuous | each-boxbox-shadowinset | [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;。

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

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

?

热点排行