Skip to main content

边框圆角 border-radius

Docs

边框圆角​

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

圆角边框示意图

  • border-radius 用于设置盒子的圆角；

  • border-radius 常见的值：

    • <length> 数值：通常用来设置小的圆角。
      • 定义圆形半径或椭圆的半长轴，半短轴。负值无效。比如 6px。
      • 带 / 的两个值：前值设置水平半径，后值设置垂直半径。
      • 一个值：该值将相等地设置两个半径。每个半径的四个值按左上、右上、右下、左下的顺序给出。
    • <percentage> 百分比：通常用来设置一定的弧度或者圆形;使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值无效。

  • border-radius 事实上是一个缩写属性，为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。顺序不能颠倒。

  • 想要设置为一个圆：

    • 元素是正方形，设置 border-radius 为高度或者宽度的一半即可，或者直接写为 50% ( border-radius: 50%;) 。
    • 元素是矩形，设置 border-radius 为高度的一半。

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

  • 当 border-collapse 的值为 collapse 时，border-radius 属性不会被应用到表格元素上。

border-radius: 1em/5em;

/* It is equivalent to: */
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;

/* It is equivalent to: */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;

语法​

border-radius =
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?

<length-percentage> =
  <length>      |
  <percentage>


border-top-left-radius =
  <length-percentage [0,∞]>{1,2}

<length-percentage> =
  <length>      |
  <percentage>

规范​

CSS Backgrounds and Borders Module Level 3 (w3c.github.io)

w3c_border-radius

w3c_border-top-left-radius

复合写法​

不带 / 的值​

值的个数简写等价于
1border-radius: 10px;border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
2border-radius: 10px 20px;border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 20px;
3border-radius: 10px 20px 30px;border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 20px;
4border-radius: 10px 20px 30px 40px;border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
Loading Github Gist ...

带 / 的值​

值的个数简写等价于
1border-radius: 10px/20px;border-top-left-radius: 10px 20px;
border-top-right-radius: 10px 20px;
border-bottom-right-radius: 10px 20px;
border-bottom-left-radius: 10px 20px;
2border-radius: 10px 20px/30px 40px;border-top-left-radius: 10px 30px;
border-top-right-radius: 20px 40px;
border-bottom-right-radius: 10px 30px;
border-bottom-left-radius: 20px 40px;
3border-radius: 10px 20px 30px/20px 30px 40px;border-top-left-radius: 10px 20px;
border-top-right-radius: 20px 30px;
border-bottom-right-radius: 30px 40px;
border-bottom-left-radius: 20px 30px;
4border-radius: 10px 20px 30px 40px/20px 30px 40px 50px;border-top-left-radius: 10px 20px;
border-top-right-radius: 20px 30px;
border-bottom-right-radius: 30px 40px;
border-bottom-left-radius: 40px 50px;
Loading Github Gist ...

示例​

Loading Github Gist ...

单词读音​

  • radius 美：[ˈreɪdiəs] 英：['reɪdiəs]