图解css3のborder-radius

早期制作圆角都是使用图片来实现、通过用1px 的水平线条来堆叠出圆角或者利用JavaScript等等方法，但是都是需要增加多个无意义的标签来实现，造成代码亢余。如今有了CSS3的圆角属性——border-radius后，我们不必会每种不同的圆角制作图片而烦恼了，即减少了图片的更新制作，减少了亢余标签，我们可以直接使用CSS3中的Border-radius来制作。

Border-radius圆角属性

/* 四個方位角同时设定 */
border-radius:[<length>|<percentage>]{1,4}[/ [ <length> | <percentage> ]{1,4} ]?
/*分別设定*/
border-top-right-radius:[<length>|<percentage>][<length>|<percentage>]?
border-bottom-right-radius:[<length>|<percentage>][<length>|<percentage>]?
border-bottom-left-radius:[<length>|<percentage>][<length>|<percentage>]?
border-top-left-radius:[<length>|<percentage>][<length>|<percentage>]?

Border-radius基本语法：

取值：

<length>：用长度值设置对象的圆角半径长度，单位可以是em、ex、pt、px。不允许负值。

<percentage>：用百分比设置对象的圆角半径长度。不允许负值。

浏览器支持情况

截至文章发表，除了IE9以下不支持，firefox和chrome等现代浏览器最新版本都支持border-radius 。

编写代码时可以直接写border-radius，也可以前加-webkit或者-moz前缀。注意如果border-radius单独写给Mozilla （火狐），Mozilla （火狐）写法跟W3C标准写法（webkit的实现方法与W3C一样）有点不同，如下

上左：W3c的写法：border-top-left-radius，Mozilla （火狐）的写法： -moz-border-radius-topleft
上右：W3c的写法：border-top-right-radius，Mozilla （火狐）的写法： -moz-border-radius-topright
下右：W3c的写法：border-bottom-right-radius，Mozilla （火狐）的写法： -moz-border-radius-bottomright
下左：W3c的写法：border-top-left-radius，Mozilla （火狐）的写法： -moz-border-radius-bottomleft

.radius1 {
    border-radius:10px20px30px40px/40px30px20px10px;}/*这个等同于*/.radius2 {
    border-top-left-radius:10px40px;
    border-top-right-radius:20px30px;
    border-bottom-right-radius:30px20px;
    border-bottom-left-radius:40px10px;}

圆角可一起写在border-radius属性，也可以四个值分开写

Border-radius详解

border-radius方位简写方式

border-radius有四个值是按照top-left、top-right、 bottom-right、 bottom-left的顺序来设置，border-radius简写方式如下

border-radius只有一个方位上的角度值时，四个角具有相同的圆角值
border-radius有两个方位上的角度值时，top-left和bottom-right是第一个圆角值；top-right等于bottom-left是第一个圆角值。
border-radius有三个方位上的角度值时，此时top-left是第一个圆角值；top-right是第二个圆角值；bottom-right是第三个圆角值；bottom-left是第二个圆角值；
border-radius有四个方位上的角度值时，此时top-left是第一个圆角值；top-right是第二个圆角值；bottom-right是第三个圆角值；bottom-left是第四个圆角值；

border-radius简写实例代码，如下：

/* 先设定 X 轴(水平)再设定 Y 轴(垂直) */.radius3 {
    border-radius:70px10px10px10px/70px10px10px10px;}

border-radius简写

水平、垂直半径

border-radius圆角半径有水平和垂直半径之分，如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。

而如果border-(top或bottom)-(left或right）-radius四个分开来写，不是用“/”来表示水平、垂直半径而是以空格分隔来表示。如下：

border-radius:10px20px30px100px/5px10px15px80px;/*“/”前面四个参数代表四角上的水平半径，“/”后面四个参数代表四角上的垂直半径 */
border-radius:10px/10px5px;/*水平半径都为10px，垂直两两对应10px和5px */
border-top-left-radius:10px30px;/*border-radius左上角单独设定水平 垂直半径 */

因为圆角有水平、垂直半径之分，所以圆角不仅可以使圆角的，可以是椭圆角的，

圆角曲线

水平/垂直半径决定了该角落的曲线。下图展示了可能出现不同绝对长度半径的几中情况：

border-radius圆角曲线

border-radius圆角不允许相互重叠，所以当相邻两个角半径之和大于所在矩形区域高/宽的大小时，曲线圆角将以同样比例收縮所有相应半径直到曲线彼此不重叠。这个比例如下：f = min(Li/Si)，i ∈ {top, right, bottom, left}，Ltop = Lbottom = 所在边界框的宽，Lleft = Lright = 所在边界框的高。如果f < 1，那么所有角半径都乘以f。可以理解为，当Li< Si时，圆角曲线半径按f比例缩小。

border-radius圆角曲线绝对长度是一种表现形式，百分比也可以表示。而百分比则是以边界框为标准。所以使用百分比圆角曲线大小受边界框的宽、高影响。

现在我们拿百分比来实验相邻圆角半径之和Si大于Li。

首先我们得清楚在50%情况下，水平、垂直半径各是多少，如下：

box-sizing: content-box时：水平半径50%等于width/2+padding+border；垂直半径则等于height/2+padding+border。
box-sizing: border-box时：水平半径50%等于width/2；垂直半径则等于height/2。

当水平、垂直都是50%时矩形则变成椭圆；如果是正方形则变成特殊的椭圆：圆。如下代码：

.radius-content-box{
    width:40px;
    height:40px;
    border: solid 30px;
    padding:10px;
    border-color: orange orange silver silver;
    border-top-left-radius:50%;
    border-top-right-radius:60px;/*box-sizing是border-box时水平半径50%等于width/2+padding+border（水平方向上的），垂直半径等于height/2+padding+border*/
    border-bottom-right-radius:50%;
    border-bottom-left-radius:50%;/*box-sizing默认值是content-box;*/}.radius-border-box {
    width:90px;
    height:90px;
    padding:10px;
    border: solid 30px;
    border-color: orange orange silver silver;
    border-top-left-radius:50%;
    border-top-right-radius:45px;/*box-sizing是border-box时水平半径50%就是width值（水平方向上的），垂直半径等于heigh值*/
    border-bottom-right-radius:50%;
    border-bottom-left-radius:50%;
    box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}

border-radius圆角曲线等于50%时

所以在半径等于50%时，矩形就会变成椭圆，正方形变成圆形。如果大于50%，即半径和大于相应边界框的宽（高）时，则按照上面说的 f = min(Li/Si) f比例比例缩小半径；如果一个矩形在相邻同方向上的半径都相等，则这个矩形都将变形成椭圆，如果是正方形则一直是圆形，如下代码：

.radius5 {
    border-radius:50%;/*60%、100%、129%	都是圆形 */}

border-radius内、外半径之分

内边半径等于外边半径减去对应边border的宽度，既border-width影响圆角的内半径。

所以当border-radius半径小于等于border-width的宽度时，border-radius圆角无内角；当border-radius半径大于border-width的宽度时，border-radius出现内角，看起来像一个圈。如下代码：

.radius-boder-width{
    border:25px solid red;
    border-radius:15px25px45px65px;}

上例代码则出现如下图

你看我top上的内圈还是直角的，囧~~~

border-radius内半径受border-width影响

如果角的两个相邻边框（border）有不同的宽度，那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。所有border-style（solid、dotted、inset等）跟著border-radius圆角的的曲線走。

这里还得注意在条相邻边的border-style转变的中心点是在一个和两边宽度成正比的角上。比如，两条边宽度相同，这个点就是一个45°的角上，如果一条边是另外一条边的两倍，那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线。

.radius-border-width-style{
    border-color: red blue green yellow;
    border-style: solid;
    border-width:10px5px;
    border-radius:80px/40px;}

上例代码则出现如下图

border之间的分界线也受border-width的影响

border分界线

border-radius应用

注意点

border-radius不能直接作用于img元素，除firefox其他浏览器貌似效果有点悲剧，border-radius将图片内容都剪切了
因为table的样式属性border-collapse是collapse时,所以border-radius圆角不能正常显示,只有border-collapse: separate;时才能正常显示。

持续更新本页所有DEMO

出自：http://www.html5jscss.com/css3-border-radius-55.html