logo
Laucher

Laucher

Laucher

2023年 05月 20日

0

使用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,它外面的任何东西都被隐藏了:

图例
图例
最后,从框和伪元素中删除背景颜色。阴影颜色在box-shadow属性中设置(在此例中是#522d5b),覆盖了盒子元素区域,并被渲染为盒子的背景层:
图例
图例

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;
}

图例
图例

评论