CSS波浪border

做过渐变色的同学们都知道线性渐变函数linear-gradient，它是以一个轴向进行颜色的渐变，而今天要实现波浪border要用到的就是同属于颜色渐变函数的径向渐变函数radial-gradient，具体细节请查看MDN官方文档，这里只讲述实现过程。

# 内切式border

// html
<div class="box"></div>	

// css
.box {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: blue;
}
.box:after {
  content: '';
  position: absolute;
  height: 8px; 
  width: 100%; 
  bottom: -4px; 
  background: radial-gradient(4px circle, #FFF 4px, transparent) repeat-x; 
  background-size: 8px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

原理是利用background的repeat效果生成多个白色圆内切在box外侧，效果图如下：

box1

# 外接式border

// html
<div class="box"></div>
// css
.box {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: blue;
}
.box:after {
  content: '';
  position: absolute;
  height: 8px; 
  width: 100%; 
  bottom: -4px; 
  background: radial-gradient(4px circle, blue 4px, transparent) repeat-x; 
  background-size: 8px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

原理和内切一样，区别在于外接自带颜色

box2

上次更新: 2025/09/05, 8:09:00

← CSS的选择器 CSS内切圆角→