（密码：tg2b） 《border-radius》

border-radius

作用

CSS3新增属性。设置元素外边框圆角。如下代码：

<div id="radius"></div>

#radius {
    width: 100px;
  height: 100px;
  background-color: aquamarine;
  border-radius: 10px; /* 设置圆角*/
}

效果如下：

                                                    

通过上面的效果图，我们可以了解到，border-radius设置的是一个元素4个方向的角，即左上角、右上角、右下角、左下角，所以，要记住：border-radius实际上为一个简写属性，将 border-top-left-radius 、 border-top-right-radius 、 border-bottom-right-radius 、 border-bottom-left-radius 简写为一个属性，上述代码相当于：

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

 

为何为圆角？

相信大家一定想要知道设置 border-radius 后，元素的圆角具体是怎么加上去的，其实，这个很简单。

实质上，当你给border-radius设置一个值时，就相当于用该值为半径，画了个圆，将这个圆刚好卡在元素的角上，取圆与边框的交集，形成一个圆角，如下图：

取交集后：

 border-radius 的值除了可以设置一个外，还可以设置多个值，具体使用方法如下⬇️

 

使用方法

1、1个值

例：border-radius: 30px;

如上所述，将30px作为半径画圆，卡在元素的四个角上，取圆与边框的交集，形成一个圆角。

 

2、2个值

例： border-radius: 10px 30px; 

效果如下：

 

由上可知，设置一个值时，使用该值为半径画圆，那么设置两个值呢？

答案是设置的值同时为半径， 10px设置的为左上角和右下角的圆的半径，30px设置的为右上角和左下角的圆的半径，相当于：

border-top-left-radius: 10px;
border-top-right-radius: 30px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 30px;

将圆分别放到对应的角上，取边框与圆的交集，形成圆角，如下图：

取交集后：

 

3、3个值

例：border-radius: 10px 20px 30px;

效果如下：

设置3个值时，3个值同时为半径， 10px 设置的为左上角圆的半径、 20px 设置的为右上角和左下角的圆的半径、 30px 设置的为右下角的圆的半径，相当于：

border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 20px;

将圆分别放到对应的角上，取边框与圆的交集，形成圆角，如下图：

取交集后：

 

4、4个值

例： border-radius: 10px 20px 30px 40px; 

效果如下：

设置为4个值时，就相当于分别设置了4个角的圆角， 10px 设置的为左上角的圆的半径、 20px 设置的为右上角圆的半径、 30px 设置的为右下角圆的半径、 40px 设置的为左下角圆的半径，相当于：

border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;

将圆分别放到对应的角上，取边框与圆的交集，形成圆角，如下图：

取交集后：

5、5个值

例：border-radius: 10px 20px 30px 40px / 5px;

效果如下：

设置5个值时， / 后面的值为什么意思呢？

先不管是什么意思，而是记住一点，只要看到 / 了，就要知道，此时不是画 圆 了，而是画 椭圆 。

椭圆是由两个半径画出来的，也就是长轴和短轴，这里不容易区分是长轴为水平方向上的还是短轴为水平方向上的，所以我们就暂且自己定义两个名字：

• • 水平半径：水平方向上的半径，如下面示意图中的红色线
  • 垂直半径：垂直方向上的半径，如下面示意图中的橙色线

示意图：

回到正题，设置5个值时究竟在设置什么？

答案是： / 前面的值设置的为水平半径， / 后面的值设置的为垂直半径，也就是说，左上角椭圆的半径为 10px 5px 、右上角椭圆的半径为 20px 5px 、右下角椭圆的半径为 30px 5px 、左下角椭圆的半径为 40px 5px 。相当于：

border-top-left-radius: 10px 5px;
border-top-right-radius: 20px 5px;
border-bottom-right-radius: 30px 5px;
border-bottom-left-radius: 40px 5px;

将椭圆分别放到对应的角上，取边框与圆的交集，形成圆角，如下图：

取交集后：

此种的使用方法还有很多变形，如：

• • border-radius: 10px / 5px;
  • border-radius: 10px 20px 30px 40px / 5px 10px;
  • border-radius: 10px 20px 30px 40px / 5px 10px 15px;
  • border-radius: 10px 20px / 5px;
  • border-radius: 10px 20px 30px / 5px 10px 15px;
  • and so on...

 

虽然变种很多，但是万变不离其宗，记住以下几点：

• • / 前面的值设置的为水平半径， / 后面的值设置的为垂直半径
  • 设置1个值 a 时，四个角的半径都为a
  • 设置2个值 a b 时，左上半径和右下半径为a，右上半径和左下半径为a，即对角一致
  • 设置3个值 a b c 时，左上半径为a，右上半径和左下半径为b，右下半径为c
  • 设置4个值 a b c d 时，左上半径为a，右上半径为b，右下半径为c，左下半径为d

 

如果实在记不住，可以抽象一些，将元素旋转一下，变为左上角朝上，那么就可以以 padding  or margin 的简写属性记住 border-radius 的啦，如下图：

 

以上，即为 border-radius 所有的使用方法，但是，除了给 border-radius 设置数值之外，也可以将其值设置为百分比，如下⬇️

 

值类型

1、length

如上，定义圆形半径 或 定义椭圆 水平半径 及 垂直半径。注意：负值无效。

2、percentage

使用百分数定义圆形半径 或 定义椭圆 水平半径 及 垂直半径，注意：

• • 水平半径相对于盒模型的宽度
  • 垂直半径相对于盒模型的高度
  • 负值无效

 

大值特性

当给border-radius设置的值过大时，只会使用能够渲染的圆角大小进行渲染，如：

代码一：

#radius {
    width: 100px;
  height: 100px;
  background-color: aquamarine;
  border-radius: 50%;
}

代码二：

#radius {
    width: 100px;
  height: 100px;
  background-color: aquamarine;
  border-radius: 300px;
}

上述两段代码的效果时一致的，都为：

 

因为宽高都为 100px 的元素，最大只能渲染出来半径为 50px 的圆角。

那么，依据大值特性能说明 50% 的效果和超出最大半径的值的效果一致吗？

• 如果元素为正方形的话，效果会一致
• 如果元素为长方形的话，则不然，我们再来看两段代码：

 

代码一：

#radius {
    width: 100px;
  height: 200px;
  background-color: aquamarine;
  border-radius: 50%;
}

效果：

代码二：

#radius {
    width: 100px;
  height: 200px;
  background-color: aquamarine;
  border-radius: 300px;
}

效果：

看到两段代码的运行结果后，会惊奇的发现，效果咋不一样？为什么？看下面⬇️

 

等比例特性

除了大值特性外， border-radius 还有一个等比例特性，即水平半径和垂直半径的比例是恒定不变的。

 

代码段一中，元素的宽度为 100px 、高度为 200px ， border-radius 为50%，也就是说，水平半径为 50px  、垂直半径为 100px 。

 

在上面的代码中，元素的宽度为 100px 、高度为 200px ，水平半径为 300px 、垂直半径为 300px ，根据大值特性，水平半径为50px，垂直半径为100px。再根据等比例特性，垂直半径/水平半径 = 1，故，垂直半径也应为 50px ，也就是说相当于设置了 border-radius: 50px 。

 

border-radius: 50px; 必然和 border-radius: 50px 100px; 的效果不同

 

兼容性

点击链接查看：https://caniuse.com/#search=border-radius

基本上所有的浏览器都支持border-radius，故使用时不需要再过多的考虑兼容性问题，

 

撰写人：杉杉