border-radius

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

1 语法

border-radius: none | <length>{1, 4}/<length>{1, 4}?

2 取值

<length>： 由浮点数字和单位标识符组成的长度值。且不可为负。

3 说明和实例

border-radius是一种缩写写法. 如果/前后的值都存在,那么/前面的值为水平半径,后面的值为垂直半径;如果没有/,则水平和垂直的值相等. 顺序是按照top-left、top-right、bottom-right、bottom-left来的;
主要会出现下面几种情况:

• 3.1 只设置一个值

  • 3.1.1 不存在/

    top-left、top-right、bottom-right、bottom-left四个值相等, 并且水平半径和垂直半径也相同

  • 3.1.2 存在/

    top-left、top-right、bottom-right、bottom-left四个值相等, 但是水平半径和垂直半径不相同
    • 

• 3.2 只设置二个值

  • 设置两个值，那么top-left等于bottom-right，并且取第一个值；top-right等于bottom-left，并且取第二个值
  • 

• 3.3 只设置三个值

  • 如果有三个值，其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right
  • 

• 3.4 设置四个值

  • 如果有四个值，其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left
    •