border-radius

2019-01-08 本文已影响0人 Jonath

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

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

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

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