HTML Dog
跳至导航

圆角

圆角以前是靠限制性的纯色背景图片，或者对于弹性盒子，靠每角一张背景图，叠加在多个嵌套的div元素上实现的。天哪，太丑了。好吧，现在不一样了。现在，只需要简单的CSS，你就可以在设计中添加比玛丽莲·梦露还要多的曲线。

border-radius？

是的，border-radius。不过别担心——你并不一定需要边框。border-radius属性可以用来为盒子的每个角添加圆角。


#marilyn {
    background: #fff;
    width: 100px;
    height: 100px;
    border-radius: 20px;
}

好了，这就是圆角。看到了吗？嗯，如果你用的是一个靠谱的浏览器（见下面的注释），你就会看到。

角的切角是围绕着一个圆（或椭圆）的相应四分之一进行的，其半径由指定的半径决定。

当然，如果你*确实*想要一个边框……


#ok_a_border_then {
    border: 5px solid #8b2;
    width: 100px;
    height: 100px;
    border-radius: 5px;
}

哇哦。

多个值

border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius也可以用来单独定位特定的角。

稍微不那么啰嗦一点，你也可以通过一个以空格分隔的值列表来单独定义所有角的半径（真是个好词），就像其他简写属性一样，从左上角开始顺时针工作。


#monroe {
    background: #fff;
    width: 100px;
    height: 100px;
    border-radius: 6px 12px 18px 24px;
}
多个值的 border-radius。

圆润的。

通过使用两个值而不是四个值，第一个长度（或百分比）将用于左上角和右下角，第二个值将用于右上角和左下角。三个值？第一个值用于左上角，然后第二个值用于右上角和左下角，最后第三个值用于右下角。太棒了。

椭圆

圆是不是对你来说有点太方正了？你可以通过用“/”分隔值来指定不同的水平和垂直半径。


#nanoo {
        background: #fff;
        width: 100px;
        height: 150px;
        border-radius: 50px/100px;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
}
纳努。