border-radius（使用详解）-Toy模板网

这篇具有很好参考价值的文章主要介绍了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 取值方式)。剩余三个相似。

border-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（使用详解）