Laucher
2023年 05月 20日
使用CSS创建漂亮的边角
开发中遇到了需要对元素边角的形状进行调整，使其更佳美观，本文中记录了几种使用css设置边角样式的方法。
1. 使用border-radius属性
border-radius是创建圆角的基本CSS属性，也是非常有用且常用的一个属性。它允许你将元素的直角边框转换为圆角。这个属性可以应用于任何具有可见边框或背景的 HTML 元素，包括盒子模型中的内边距和边框。 border-radius 可以接受不同的值来控制各个角的曲率，这里是一些主要的用法：
单值
当只指定一个值时，这个值将被应用到所有的四个角：
div{
border-radius: 10px;
}
这将使所有四个角都有 10 像素的圆角。
双值
当指定两个值时，第一个值将应用于水平方向的圆角半径，第二个值应用于垂直方向的圆角半径：
div{
border-radius: 50px / 20px;
}这将产生椭圆形的角，水平方向的半径为 50 像素，垂直方向的半径为 20 像素。
四值
当指定四个值时，它们分别对应四个角（顺时针方向）：top-left, top-right, bottom-right, bottom-left：
div{
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
}这将使得左上角有 10 像素的圆角，右上角有 20 像素的圆角，依此类推。
每角单独指定
也可以为每个角单独指定圆角大小：
div{
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
}也可以使用border-radius为所有角设置不同的椭圆弧：
div{
border-radius: 60px 40px 20px 10px / 21px 49px 27px 7px;
}
百分比
除了像素值之外，border-radius 还支持百分比值。百分比值是相对于边框框的宽度和高度计算的：
div{
border-radius: 50%;
}当应用于正方形元素时，这将产生一个完美的圆形。 还有一种方法设置正方形元素为圆形的方法：
div{
border-radius: 9999px;
}tailwindcss用的就是此方法
2.切口角
除了border-radius属性之外，还可以利用:before和:after伪元素来创建角点，方法是将第二个元素沿着原始父元素一起呈现。box-shadow属性让这些伪元素创建不同类型的角。
使用:before而不是:after来避免添加内容后的布局问题：
div:before {
content: "";
position: absolute;
margin: -20px;
width: 40px;
height: 40px;
transform: rotate(45deg);
background-color: black;
}
然后，在框上设置overflow:hidden以隐藏其子元素的溢出部分。
div {
/* 其他样式 */
overflow: hidden;
}使用box-shadow填充背景
div:before {
/* 其他样式 */
box-shadow: 0 0 0 250px #522d5b;
}接下来，在伪元素周围创建了一个没有任何模糊效果的大阴影（使用第三个0参数设置），得到了它周围元素的放大副本。由于框中的overflow:hidden，它外面的任何东西都被隐藏了：
div:before {
content: "";
position: absolute;
margin: -20px;
width: 40px;
height: 40px;
border-radius: 50%; /* new */
box-shadow: 0 0 0 250px #522d5b;
}
也可以使用:after伪元素来设置两个角的样式。
3.clip-path属性
clip-path属性决定在元素中显示哪个区域。可以将其与polygon()函数一起使用，以创建凹口角（或具有复杂值的任何其他东西）。
div {
position: relative;
width: 200px;
height: 80px;
overflow: hidden;
background-color: #522d5b;
clip-path: polygon(
0 20%,
10% 0,
90% 0,
100% 20%,
100% 80%,
90% 100%,
10% 100%,
0% 80%
)
}一个有四个缺口角的元素：
可以使用以下多边形定义仅为长方体的两个对角顶点创建凹口角：
div {
position: relative;
width: 200px;
height: 80px;
overflow: hidden;
background-color: #522d5b;
clip-path: polygon(
0 20%,
10% 0,
100% 0,
100% 80%,
90% 100%,
0% 100%
)
}带有两个缺口角的元素：
4.mask属性和radial-gradient()函数
如果需要挖取所有四个角，可以使用新的CSS mask属性（基线2023支持）和radial-gradient()函数：
div {
position: relative;
width: 200px;
height: 80px;
background-color: #522d5b;
mask: radial-gradient(20px at 40px 40px, transparent 98%, black) -40px -40px;
}梯度函数在黑色背景上创建一个透明的圆圈。然后使用-40px -40px掩码定位将生成的圆推到左上角，以将梯度圆区域均匀分布到所有四个角
div {
position: relative;
width: 200px;
height: 80px;
background-color: #522d5b;
mask: radial-gradient(14px at 40px 40px, transparent 98%, black) -33px -36px
}
5.消息气泡角
创建伪元素,之前的长方形div不需要overflow: hidden方法。不然伪元素会隐藏
div:before {
content: "";
position: absolute;
top: -40px;
left: 0;
height: 40px;
width: 40px;
border-bottom-left-radius: 50%;
background-color: black;
}
下一步是填充伪元素之间的小部分并删除背景色。可以使用box-shadow属性来做：
div:before {
content: "";
position: absolute;
top: -40px;
left: 0;
height: 40px;
width: 40px;
border-bottom-left-radius: 50%;
box-shadow: 0 20px 0 0 #522d5b;
}这种类型的设计非常适合语音气泡。
div {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 80px;
background: #522d5b;
border-radius: 0 15px 15px 15px;
color: white;
}
