你真的了解border-radius吗？
水平半径和垂直半径
现在很多人都不知道我们平常使用的圆角值是一种缩写，例如我们平常写的top圆角10px就是一种缩写：
border-top-left-radius:10px; 等同于 border-top-left-radius:10px 10px;
其中，第一个值表示水平半径，第二个值表示圆角垂直半径；
例如：
<style>
.talk-dialog {
position: relative;
background: deepskyblue;
width: 100px;
height: 100px;
margin: 0 auto;
border-top-left-radius: 30px 80px;
}
</style>
<div class="talk-dialog"></div>
那么border-radius的写法应该怎么去写呢？？它的水平半径和垂直半径是通过 斜杠 区分。 例如：
border-radius: 30px / 40px;
表示四个角的圆角水平半径都是30px,垂直半径是40px；
border-radius斜杠前后都支持1-4个值，以下多个值得写法为：
border-radius:10px 20px / 5% 20% 3% 10%;(左上+右下，右上+左下， / 左上，右上，右下，左下)
重叠问题
难道你认为这就完了，border-radius你彻底搞懂了？？其实不然！
我们来看看下面一个列子：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.talk-dialog {
position: relative;
background: red;
width: 100px;//重点关注
height: 100px;//重点关注
border-radius: 30px / 80px; //重点关注
margin: 50px auto;
}
.talk-dialog1 {
position: relative;
background: deepskyblue;
width: 100px;//重点关注
height: 100px;//重点关注
border-top-left-radius: 30px 80px; //重点关注
margin: 10px auto;
}
</style>
</head>
<body>
<div class="talk-dialog"></div>
<div class="talk-dialog1"></div>
</body>
</html>
我们的容器大小宽为100px,高为100px, 问大家一个问题！
border-radius: 30px / 80px; 与 border-top-left-radius: 30px 80px; 两个不同的容器的 top-left的圆角大小一样吗？？？
大家或许这样看不出来，我们修改为绝对布局，两个元素重叠在一起看看是否左上角可以完美重叠？
答案揭晓： 圆角效果是不一样的，因为我们容器的垂直高度为100px,我们border-radius:30px / 80px设置以后，我们元素的高度不足以放下两个半轴为80px（80+80=160）的椭圆，如果这种场景不做约束，曲线就会发生一定的重叠，因此css 规范对圆角曲线重叠问题做了额外的渲染设定，具体算法如下：
f=min(L宽度/S宽度，L高度/S高度)，L为容器宽高，S为半径之和，
这里计算我们的例子：f=min(100/60,100/160)=0.625 , f的值小于1，则所有的圆角值都要乘以f
因此：border-radius: 30px / 80px;
左上角值等同于：
border-top-left-radius:18.75px 50px;
细节
- border-radius 不支持负值
- 圆角以外的区域不可点击
- border-radius没有继承性，因此父元素设置了border-radius,子元素依旧是直角效果，要想达到圆角效果，需要加overflow：hidden。（重要，工作中常用）
- border-radius 也支持transition过渡效果
高级用法案例：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="icon" href="data:;base64,=" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
<meta name=" theme-color" content="#000000" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<style>
.radius {
width: 150px;
height: 150px;
border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
object-fit: cover;
object-position: right;
}
.demo {
position: relative;
width: 150px;
height: 150px;
margin: 10px auto;
}
.radius-1 {
width: 150px;
height: 150px;
object-fit: cover;
object-position: right;
background: deepskyblue;
color: #fff;
font-size: 40px;
text-align: center;
line-height: 120px;
border-bottom-right-radius: 100%;
}
.talk {
padding: 10px;
background: deepskyblue;
border-radius: .5em;
color: #fff;
position: relative;
z-index: 0;
}
.talk::before {
content: "";
position: absolute;
width: 15px;
height: 10px;
color: deepskyblue;
border-top: 10px solid;
border-top-left-radius: 80%;
left: 0;
bottom: 0;
margin-left: -12px;
-ms-transform: skewX(-30deg) scaleY(1.3);
transform: skewX(-30deg) scaleY(1.3);
z-index: -1;
}
</style>
</head>
<body>
<div class="demo demo1">
<img class="radius" src="./1.jpg" />
</div>
<div class="demo demo2">
<div class="radius-1">1</div>
</div>
<div class="demo demo3">
<div class="talk">border-radius圆角效果实现。</div>
</div>
</body>
</html>
结语：
欢迎大家多提宝贵意见，一赞一回，如果本文让你get 到知识，请不要吝啬你的star!
