利用CSS3的新功能兑现（椭）圆角边框和图片边框
日期：2014-05-17 浏览次数：20561 次
利用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);
-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-r
-moz-border-r
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
