Web前端CSS实现带圆角的渐变边框的方法

CSS如何实现带圆角的渐变边框？下面本篇文章给大家介绍一下使用CSS巧妙实现带圆角的渐变边框的几种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

使用 border-image 实现渐变边框

有了 border-image 之后，实现渐变边框变得很方便

实现如下：

.border-image {

width: 200px;

height: 100px;

border-radius: 10px;

border-image-source: linear-gradient(45deg, gold, deeppink);

border-image-slice: 1;

border-image-repeat: stretch;

}

上面关于 border-image 的三个属性可以简写为 border-image: linear-gradient(45deg, gold, deeppink) 1;

background-image + 伪元素

我们不再使用 border-image ，而是使用 background-image + 伪元素 的方案，这也是在border-image 规范没有出现最常用的方法。

非常简单，简单的示意图如下：

利用 background-image 实现一个渐变背景，再通过叠加一个白色背景使之形成一个渐变边框。