利⽤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 radius什么意思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引擎的浏览器的样式与 Firefox 不同，这个相同的效果采⽤的样式则是这样的：
-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(/Images/copyright.gif) 16 16 round stretch;-webkit-border-
image:url(/Images/copyright.gif) 16 16 round stretch;border-width:16px
以上例⼦的效果如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。