html实现边框颜色渐变,渐变边框的实现方式

前言

我们在 css 里可以直接使用 border 属性指定元素的边框，但这样的方法具有局限性，就是只能添加单色的边框，如果需要给元素添加渐变的边框，又该如何实现呢？

利用 border-image

button

.btn {

display: inline-flex;

align-items: center;

justify-content: center;

cursor: pointer;

user-select: none;

border: 4px solid transparent;

border-image: linear-gradient(#e66465, #9198e5);

padding: 8px 16px;

font-size: 32px;

}

效果如下图所示：

border-image

这样就完成了基本的渐变边框，但这种方法并不能支持圆角属性，除非我们直接使用带圆角的图片。

利用 background

CSS SECRETS 中第二章第八节提到，可以利用叠加的背景图片去模拟边框效果，利用这一思想，我们在渐变的背景之上叠加一个原有的背景，就能达到我们想要的效果，而且因为利用的是 background，所以圆角属性也能得到支持，一举两得。

.btn {

<