css3 渐变边框如何实现圆角效果

时间：

分类：

css3

字数：

1.8k 字

时长：

大约需要 9 分钟

次数：

0 人阅读

常规的 border-image 属性如果直接使用 border-radius 会无效，关于如何实现渐变边框圆角，网上流传着大概这么几种办法：

万能的图片

此方法在此不做介绍，使用图片基本可以解决前端样式中的大部分问题，此处不做讨论，毕竟作为前端，要有一种觉悟：能用代码实现绝不用图片。

常规使用问题

代码：

1
2
3
4
5
6
7
8
9
10
<style>
.border-radius-1 {
  width: 60px;
  height: 60px;
  border-radius: 60px;
  border: 10px solid;
  border-image: linear-gradient(90deg, rgba(98, 54, 255, 0.3), rgba(252, 53, 100, 0.3)) 10 10;
}
</style>
<div class="border-radius-1">内容</div>

效果如下：

内容

并不能实现渐变圆角，所以只能换一种方法。

渐变背景方式

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.border-radius-2 {
  width: 60px;
  height: 60px;
  border: none;
  background-image: linear-gradient(#fff, #fff),linear-gradient(to bottom right, rgba(98, 54, 255, 0.3), rgba(252, 53, 100, 0.3));
  padding: 10px;
  border-radius: 60px;
  background-clip: content-box,padding-box;
  text-align: center;
}
</style>
<div class="border-radius-2">内容</div>

效果如下：

内容

看起来好像是实现了渐变边框的圆角效果，然而这是在纯底色的背景下看起来这样，如果改下背景色（可点击此处查看效果），效果就变了，按钮的底色是还是纯色，并没有变成镂空，并没有完全实现效果。

借助 after 伪类

原理跟上一种渐变背景一样，只是不再使用 background-clip ，而是使用 after 伪类覆盖，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
.border-radius-3 {
  width: 60px;
  height: 60px;
  border: none;
  background-image: linear-gradient(to bottom right, rgba(98, 54, 255, 0.3), rgba(252, 53, 100, 0.3));
  border-radius: 60px;
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 10px;
}
.border-radius-3:after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  z-index: -1;
  background: #fff;
  border-radius: 60px;
}
</style>
<div class="border-radius-3">内容</div>

效果如下：

内容

问题一样，也会有非纯色背景不会镂空，改下背景色（可点击此处查看效果）试试。

借助 css3 中的 mask 遮罩蒙版 加 after 伪类实现

此方法应该算是比较完美的方法了，然而除了兼容性还是有其他问题，请看后文。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
.border-radius-4 {
  position: relative;
  z-index: 1;
  width: 80px;
  height: 80px;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}
.border-radius-4:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(to bottom right, rgba(98, 54, 255, 0.3), rgba(252, 53, 100, 0.3));
  /* 径向渐变中的 30px 计算方法为 (宽度 / 2 - 边框大小)，此处为 80px / 2 - 10px */
  mask-image: radial-gradient(transparent 0 30px, #000 30px);
  -webkit-mask-image: radial-gradient(transparent 0 30px, #000 30px);
}
</style>
<div class="border-radius-4">内容</div>

效果如下：

内容

改下背景色（可点击此处查看效果）试试。

mask-image兼容性如下：

看起来很美好是吧，然而现实是此方法仅适用于正方形的镂空渐变边框，如果变成长方形，则会变成这样：

内容

或者这样：

内容

这肯定不是我们想要的效果，如何实现长方形的镂空渐变边框？

使用 CSS3 中的 clip-path 属性实现

本示例代码在 chrome 87 中运行还无效， firefox 86 中可以看到效果！

内容

改下背景色（可点击此处查看效果）试试。

效果挺好，然而clip-path兼容性惨不忍睹：

使用 SVG

上面的 clip-path 中也是使用了 SVG 来实现效果，只是兼容性并不理想，所以到最后还是老实点使用 SVG 实现吧，如下：

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 224 64" width="224" height="64">
  <defs>
    <linearGradient id="grd1" gradientUnits="userSpaceOnUse"  x1="0" y1="32" x2="224" y2="32">
      <stop offset="0" stop-color="#6236ff" stop-opacity="0.3" />
      <stop offset="1" stop-color="#fc3564" stop-opacity="0.3" />
    </linearGradient>
  </defs>
  <style>
    tspan { white-space:pre }
    .shp0 { fill: url(#grd1) } 
  </style>
  <path id="Shape 1" class="shp0" d="M32,0h160c17.7,0 32,14.3 32,32c0,17.7 -14.3,32 -32,32h-160c-17.7,0 -32,-14.3 -32,-32c0,-17.7 14.3,-32 32,-32zM2,32c0,16.59 13.41,30 30,30h160c16.59,0 30,-13.41 30,-30c0,-16.59 -13.41,-30 -30,-30h-160c-16.59,0 -30,13.41 -30,30z" />
</svg>

示例：

改下背景色（可点击此处查看效果）试试。

总结

CSS 在设计师的手下，还是被虐得体无完肤，并不是所有效果都能使用 CSS 写出来。SVG 作为矢量图片类型，还是有必要掌握基础用法。

–文章完–

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2021-03-08/css3-border-image-radius/

如果您觉得文章不错，可以点击文章中的广告支持一下！