CSS进阶篇——圆角

Posted 2022-10-03 老梁写代码

圆角会让生硬的背景图变得更圆润，可以起到很好的修饰作用。

边框半径

border-radius 属性可以让盒子（box）的四个角变成圆角，这个属性名有误导性，其实没有边框依然可以变圆角。

#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-raiuds 的四个值从左上角开始，按照顺时针方向，分别作用于左上、右上、右下、左下。

如果 border-radius 只有两个值，那么第一个值作用于左上↖和右下↘，第二只作用于右上↗和左下↙；如果是三个值，那分别作用于左上、右上和左下、右下。

椭圆

其实 border-radius 一共有 8 个值，因为每个角的半径又分为水平半径和垂直半径。

这两个值可用 / 分割：

#nanoo 
    background: #fff;
    width: 100px;
    height: 150px;
    border-radius: 50px/100px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;

效果如下：

参考资料

• Beautiful CSS