巧妙实现带圆角的渐变边框

如何实现下面这个渐变的边框效果：

这个问题自己不难，实现的方法也有一些，主要是有一些细节须要注意。

border-image

border-image 是 CSS 规范 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和 border 的官方规范) 新增的一个属性值。

顾名思义，咱们能够给 border 元素添加 image，相似于 background-image，能够是图片也能够是渐变，再也不局限于纯色。

使用 border-image 实现渐变边框

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

不过多介绍 border-image 的语法，读者须要自行了解一下。

实现以下：

<div class="border-image"></div>
复制代码

.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;

获得以下结果：

border-radius 失效

仔细看上面的 Demo，设置了 border-radius: 10px 可是实际表现没有圆角。使用 border-image 最大的问题在于，设置的 border-radius 会失效。

咱们没法获得一个带圆角的渐变边框。缘由，查看官方规范 W3C 解释以下：

A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.

为此，咱们得另辟蹊径或者稍加改进，获得带圆角的渐变边框。

法一：background-image + 伪元素

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

很是简单，简单的示意图以下：

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

CodePen Demo -- bg + overflow 实现渐变边框

缺点

这个方案有两个问题，第一个是多使用了两个元素(固然在这里是 ::before 和 ::after)，其次最致命的是，若是要求边框內的背景是透明的，此方案便行不通了。

法二，使用 background-clip 实现

第二种方法，使用 background-clip: content-box 以及 background-clip: border-box 配合使用。

background-clip：background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框下面。它的部分取值和 box-sizing 相似。其中，

• background-clip: border-box 表示设置的背景 background-image 将延伸至边框
• background-clip: content-box 表示设置的背景 background-image 被裁剪至内容区（content box）外沿

这里，咱们使用设置两个 background-image，设置两个 background-clip ，而且将 border 设置为透明便可：

核心 CSS：

div {
    width: 200px;
    height: 100px;
    border: solid 10px transparent;
    border-radius: 10px;
    background-image: linear-gradient(#fee, #fee),
        linear-gradient(to right, green, gold);
    background-origin: border-box;
    background-clip: content-box, border-box;
}
复制代码

由于用到了 background-clip: border-box，因此还须要 background-origin: border-box 使图案完整显示，能够尝试下关掉这个属性，便可明白为何须要这样作。

CodePen Demo -- background-clip 实现渐变边框

缺点

与第一种方法相似，若是要求边框內的背景是透明的，此方案便行不通了。

法三：border-image + overflow: hidden

这个方法也很好理解，既然设置了 background-image 的元素的 border-radius 失效。那么，咱们只须要给它加一个父容器，父容器设置 overflow: hidden + border-radius 便可：

<div class="border-image-overflow"></div>
复制代码

.border-image-pesudo {
    position: relative;
    width: 200px;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
}

.border-image-pesudo::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
} 
复制代码

效果以下：

固然，这里仍是多借助了一个元素实现。还有一种方法，能够不使用多余元素实现：

法四：border-image + clip-path

设置了 background-image 的元素的 border-radius 失效。可是在 CSS 中，还有其它方法能够产生带圆角的容器，那就是借助 clip-path。

clip-path，一个很是有意思的 CSS 属性。

clip-path CSS 属性能够建立一个只有元素的部分区域能够显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。

简而言之，这里，咱们只须要在 border-image 的基础上，再利用 clip-path 裁剪出一个带圆角的矩形容器便可：

<div class="border-image-clip-path"></div>
复制代码

.border-image-clip-path {
    position: relative;
    width: 200px;
    height: 100px;
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0 round 10px);
}
复制代码

解释一下：clip-path: inset(0 round 10px) 。

• clip-path: inset() 是矩形裁剪
• inset() 的用法有多种，在这里 inset(0 round 10px) 能够理解为，实现一个父容器大小（彻底贴合，垂直水平居中于父容器）且 border-radius: 10px 的容器，将这个元素以外的全部东西裁剪掉（即不可见）。

很是完美，效果以下：

固然，还能够利用 filter: hue-rotate()顺手再加个渐变更画：

你能够在我 CSS-Inspiration 看到这个例子：

CSS-Inspiration -- 使用 clip-path 和 border-image 实现圆角渐变边框

最后

好了，本文到此结束，但愿对你有帮助 :)

更多精彩 CSS 技术文章汇总在个人 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

更多精彩有趣的 CSS 效果，欢迎来这里看看 CSS 灵感 -- 在这里找到写 CSS 的灵感。

若是还有什么疑问或者建议，能够多多交流，原创文章，文笔有限，才疏学浅，文中如有不正之处，万望告知。