CSS3属性之border-radius

无论CSS那个版本，对于CSS制作圆角，想必大家都不会陌生，不过在CSS3到来之前，为了制作圆角是一件很麻烦的事情，记得曾经的一个方法是制作4个空标签并设置圆角背景，最后分别定位到相应的位置，还有一种不需要图片的方法是，用多个一像素的块级元素叠加，然后设置不同宽度或者高度形成圆角，这种方法相比第一种更加麻烦，但是没有图片。border-radius来了，小伙伴们惊呆了，各种犀利的圆角效果竟能如此简单的写出来，不用图片，不用冗余的代码。猛击这里看奥运五环DEMO

属性名称：border-radius

取值：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

说明： border-radius是一种缩写的方法。如果“/”存在，则前面为水平半径，后面为垂直半径，如果没有，则水平垂直半径相等。如果只有一个值，则按照top-left、top-right、bottom-right、bottom-left的顺序排列；有两个值，则top-left和bottom-right取第一个值，top-right和bottom-left取第二个值；有三个值，则top-left取第一个值，top-right和bottom-left取第二个值，bottom-right取第三个值；有四个值，则全部相等。

相关属性：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

取值：[ <length> | <percentage> ] [ <length> | <percentage> ]?

说明：第一个为水平半径，第二个为垂直半径，如果第二个省略则水平垂直半径相等。如果其中一个为0，则垂直无圆角效果。如果值为百分比，则取值相对于盒模型，水平半径取值相对于盒模型的宽度，垂直半径相对于盒模型的高度。

兼容性：（来自http://caniuse.com）

CSS3属性之border-radius

这里要特别说下，现在网上还有些资料说是要加浏览器的私有属性，可能那些资料有些陈旧，可能有些是直接copy别人的，个人觉得，css3中的border-radius属性就写这篇文章时，已经完全没必要加各种私有属性，并且把bootstrap3.0转sass的过程中，发现bt也是这么做的。

一些代码：

border-radius: 10px

等价于：
border-top-left-radius: 10px
border-top-right-radius: 10px
border-bottom-left-radius: 10px
border-bottom-right-radius: 10px

border-radius: 10px 20px 5px / 30px 15px

等价于：
border-top-left-radius: 10px 30px
border-top-right-radius: 20px 15px
border-bottom-left-radius: 5px 30px
border-bottom-right-radius: 20px 15px

一些DEMO：

1. 当radius的值大于作于元素的宽度或者高度时，则radius取元素的宽度或者高度。

width: 100px
height: 100px
background: green
border-top-right-radius: 150px

等价于：
width: 100px
height: 100px
background: green
border-top-right-radius: 100px

效果如下：

CSS3属性之border-radius

2. 当存在border时，如果radius的值小于或者等于border的width值，只有border会有圆角效果

width: 100px
height: 100px
background: green
border: 30px solid blue
border-radius: 30px

效果如下（边框内的区域四个角无圆角效果）：

CSS3属性之border-radius

如果radius的值大于border的width值时

width: 100px
height: 100px
background: green
border: 30px solid blue
border-radius: 40px

效果如下：

CSS3属性之border-radius

4. 当适用于table元素时，table的border-collapse属性为collapse时并且border的width不为0时，radius对border没有效果，而对table的border区域以内的部分有效果，th、td效果同table

.table_1
  background: green
  width: 300px
  height: 100px
  border-radius: 50px
  border: 5px solid blue
  text-align: center
    
.table_2
  width: 300px
  height: 100px
  text-align: center
  td
    background: green
    border-radius: 50px
    border: 5px solid blue

效果如下：

CSS3属性之border-radius

在一般情况下，table的border-collapse属性一般都会在reset.css中被置为collapse，那如果需要table有边框并且有圆角怎么办呢？可以把table的border设置为0并且给之外面加一层div.table_radius，然后设置radius就可以了，这个值针对table哦，td及th无法解决。

.table_radius
  width: 300px
  height: 100px
  border: 5px solid blue
  border-radius: 50px
  text-align: center
  line-height: 100px
  overflow: hidden
.table_1
  width: 100%
  height: 100%
  background: green

效果如下：

CSS3属性之border-radius

some Known issues（来自http://caniuse.com）

1. Android Browser 2.3 does not support % value for border-radius.（做手机端的时候这个bug亲身经历过，目前安卓2.3还有一定的比例，所以建议别用%）

2. Border-radius does not work on fieldset elements in IE9.

3. The stock browser on the Samsung Galaxy S4 with Android 4.2 does not support the "border-radius" shorthand property but does support the long-hand properties for each corner like "border-top-left-radius".

秒客网

CSS3属性之border-radius

相关文章