完美解决渐变色边框（Gradient borders）问题

本原创文章首发于稀土掘金:

完美解决渐变色边框（Gradient borders）问题

1.使用 border-image

CSS 提供了 border-image 属性用于给 border 绘制复杂图样，与 background-image 类似，我们可以在 border 中展示image和linear-gradient。

通过 border-image 设置渐变色 border 是最简单的方法，只需要两行代码：

这种方式虽然简单但有个明显的缺陷，不支持设置 border-radius。接下来会介绍几种支持 border-radius 的方法。

2.使用 background-image

使用 background-image 绘制渐变色背景，并且把中间用纯色遮住应该是最容易想到的一种方法，思路是：使用两个盒子叠加，给下层的盒子设置渐变色背景和 padding，给上层盒子设置纯色背景。

这种方式的优点是容易理解，兼容性好，缺点是设置 content 的 border-radius 会比较 tricky，且不准确。

3.两层元素、background-image、background-clip

为了解决方法 2 中 border-radius 不准确的问题，可以使用一个单独的元素作为渐变色背景放在最下层，上层设置一个透明的 border 和纯色的背景（需要设置 background-clip: padding-box 以避免盖住下层元素的 border）, 上下两层设置相同的 border-radius。

4.伪元素、方法3的简化

我们可以使用伪元素替换 div.border-bg 以简化HTML结构

5.单层元素、background-clip、background-origin、background-image

最后是我觉得最优雅的一种方法，只需要用到单层元素，为其分别设置 background-clip、background-origin、background-image 这三个属性，每个属性设置两组值，第一组用于设置border内的单色背景，第二组用于设置border上的渐变色。

目前CSS实现渐变色边框的方案有这5种，推荐优先使用4和5。

但是不能实现透明背景的边框。

6.终极解决方案

使用hi-kits实现动态边框渐变，并且可以保持背景透明，渐变只作用于边框上，并且宽高、圆角大小、边框粗细都可以进行控制。

完美！！

7.团队介绍

「三翼鸟数字化技术平台-智能运营平台」以用户行为数据为基础，利用推荐引擎为用户提供“千人千面”的个性化推荐服务，改善用户体验，持续提升核心业务指标。通过构建高效、智能的线上运营系统，全面整合数据资产，实现数据分析-人群圈选-用户触达-后效分析-策略优化的运营闭环，并提供可视化报表，一站式操作提升数字化运营效率。