border-radius（使用详解）

一、定义

CSS 属性 **

border-radius

** 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。

该属性是一个 简写属性，是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。

**

border-top-left-radius

** 用来设置元素左上角的圆角效果。这段圆弧（角）可以是圆或椭圆的一部分。如果其中有一个值为 0，那么将无圆角效果（见 **

border-top-left-radius

** 取值方式)。剩余三个相似。

即使元素没有边框，圆角也可以用到 background 上面，具体效果受 background-clip 影响。

当 border-collapse 的值为

collapse

时，

border-radius

属性不会被应用到表格元素上。

二、border-radius及其子属性的语法和值

1. 语法：

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

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

2. 值：

• length：定义圆形半径或椭圆的半长轴，半短轴（或水平半径，垂直半径）。负值无效。
• percentage：使用百分数定义圆形半径或椭圆的半长轴，半短轴（或水平半径，垂直半径）。水平半径相对于盒模型的宽度；垂直半径相对于盒模型的高度。负值无效。

注意：

• border-top-left--radius属性的两个长度或百分比值定义了椭圆的四分之一外边框的边缘角落的形状。第一个值是水平半径，第二个是垂直半径。如果省略第二个值，它是从第一个值复制。如果任一长度为零，角落里是方的，不圆润。
• 每种半径（水平半径或垂直半径）的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，则与右上角是相同的。如果省略右下角，则与左上角是相同的。如果省略右上角，则与左上角是相同的。
• 当四个角为圆角的时，水平半径和垂直半径相等。可以简写为border-radius：1-4 length | ％

3. 举例：

例一：

border-radius: 1em/5em;

按照上述注意事项的第2条可知，
border-radius: 1em/5em;
全写为 border-radius: 1em 1em 1em 1em/5em 5em 5em 5em;

/* 等价于： */

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

------分割线-------

border-radius: 4px 3px 6px / 2px 4px;

同样，
border-radius: 4px 3px 6px / 2px 4px;
全写为 border-radius: 4px 3px 6px 3px/ 2px 4px 2px 4px;
/* 等价于： */

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

注意：中间的 “/” 用于分隔四个角的水平半径和垂直半径

例二：

      p {
            background-color: aquamarine;
            width: 160px;
            height: 160px;
            border-radius: 50% 30% 30% 50%;
        }

其中，border-radius的值按顺序，50%表示左上角的圆角所属圆的水平半径和垂直半径各占盒子的宽和高50%；30%表示右上角的圆角所属圆的水平半径和垂直半径各占盒子的宽和高30%，以此类推。

参考MDN和菜鸟教程总结一番。