灵活使用 border-radius

border-radius 是一个复合 CSS 属性，其包含的简单属性为：

• border-top-left-radius

• border-top-right-radius

• border-bottom-left-radius

• border-bottom-right-radius

border-top-left-radius

• 定义

        设置左上角边框形状。

• 用法

        border-top-left-radius: length|% [length|%];

border-top-left-radius 属性长度值和百分比值定义四分之一椭圆的半径。第一个值是水平半径，第二个值是垂直半径。

示例1

.top-left-radius-number {
    border-top-left-radius: 100px;
}

若属性值中省略第二个值，则复制第一个值。所以上图水平方向和垂直方向半径相同。

示例2

.top-left-radius-percent {
    border-top-left-radius: 50% 100%;
}

水平半径的半分比值参考边框盒的宽度，垂直半径的百分比值参考边框盒的高度。如图，可以看到左上角水平方向半径是宽度的一半，垂直方向半径等于高度值。

示例3

.top-left-radius-rect {
    border-top-left-radius: 0;
}

属性值为 0 时边角为方形，等价于不设置属性的状态。

 

---

border-radius

• 定义

        设置边框形状。

• 用法

        border-radius: 1-4 length|% / 1-4 length|%;

由于 border-radius 是一个复合属性，结合其用法，可以得出 border-radius 是有多种使用方式的。

示例4

.one-radius {
    border-radius: 100px;
}

设置一个 border-radius 值时，top-left、top-right、bottom-left 和 bottom-right 值相同。由示例1可知，水平方向和垂直方向值也相同。

示例5

.two-radius {
    border-radius: 100px 50px;
}

设置两个 border-radius 值时，bottom-left 与 top-right 值相同，bottom-right 与 top-left 值相同。这时水平方向和垂直方向值仍然相同。

示例6

.four-radius {
    border-radius: 100px 50px 50px 100px;
}

设置四个 border-radius 值时，每一个方向上都有了自己的值，这时水平方向和垂直方向值依旧相同。

示例7

.border-radius-horizontal-vertical {
    border-radius: 100px / 50px;
}

这里我们通过符号 / 来区分水平方向和垂直方向， / 之前是水平方向的值，之后则是垂直方向的值。这样水平方向和垂直方向就可以被赋予不同的值。

示例8

.eight-radius-horizontal-bigger {
    border-radius: 50px 50px 50px 50px / 30px 30px 30px 30px;
}

那么设置八个 border-radius 值时，就很好理解水平方向和垂直方向效果不同的原因了。

示例9

.eight-radius-vertical-bigger {
    border-radius: 30px 30px 30px 30px / 50px 50px 50px 50px;
}

上图与示例8的差别仅在于垂直方向的值大于水平方向的值。

 

---------

更多 CSS 技巧，请关注微信公众号

公众号菜单栏有微信交流群，欢迎加入~~~