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

常规的 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/

如果您觉得文章不错,可以请我喝一杯咖啡!