给 border 设置渐变色是很常见的效果，实现这个效果有很多思路，今天把我所知道的方法罗列于此供大家参考。 # 1. 使用 `border-image` CSS 提供了 [border-image](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image) 属性用于给 border 绘制复杂图样，与 [background-image](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) 类似，我们可以在 border 中展示`image`和`linear-gradient`。通过 `border-image` 设置渐变色 border 是最简单的方法，只需要两行代码： **CSS:** ```css div { border: 4px solid; border-image: linear-gradient(to right, #8f41e9, #578aef) 1; } /* 或者 */ div { border: 4px solid; border-image-source: linear-gradient(to right, #8f41e9, #578aef); border-image-slice: 1; } ``` [Codepen demo](https://codepen.io/mudontire/pen/xxLxeZw) 这种方式虽然简单但有个明显的缺陷，不支持设置 `border-radius`。接下来会介绍几种支持 `border-radius` 的方法。 # 2. 使用 `background-image` 使用 `background-image` 绘制渐变色背景，并且把中间用纯色遮住应该是最容易想到的一种方法，思路是：使用两个盒子叠加，给下层的盒子设置渐变色背景和 padding，给上层盒子设置纯色背景。 **HTML:** ```html

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis, accusamus tempora.

``` **CSS:** ```css .border-box { width: 300px; height: 200px; margin: 25px 0; } .border-bg { padding: 4px; background: linear-gradient(to right, #8f41e9, #578aef); border-radius: 16px; } .content { height: 100%; background: #222; border-radius: 13px; /*trciky part*/ } ``` [Codepen demo](https://codepen.io/mudontire/pen/ZEJEZoY) 这种方式的优点是容易理解，兼容性好，缺点是设置 content 的 `border-radius` 会比较 tricky，且不准确。 # 3. 两层元素、`background-image`、`background-clip` 为了解决方法 2 中 `border-radius` 不准确的问题，可以使用一个单独的元素作为渐变色背景放在最下层，上层设置一个透明的 border 和纯色的背景（需要设置 background-clip: padding-box 以避免盖住下层元素的 border）, 上下两层设置相同的 `border-radius`。 **HTML:** ```html:

``` **CSS:** ```css .border-box { border: 4px solid transparent; border-radius: 16px; position: relative; background-color: #222; background-clip: padding-box; /*important*/ } .border-box::before { content: ''; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -1; margin: -4px; border-radius: inherit; /*important*/ background: linear-gradient(to right, #8F41E9, #578AEF); } ``` [Codepen demo](https://codepen.io/mudontire/pen/JjyjVwN) # 5. 单层元素、`background-clip`、`background-origin`、`background-image` 最后是我觉得最优雅的一种方法，只需要用到单层元素，为其分别设置 `background-clip`、`background-origin`、`background-image` 这三个属性，每个属性设置两组值，第一组用于设置border内的单色背景，第二组用于设置border上的渐变色。 **HTML:** ```html

``` **CSS:** ```css .border-box { border: 4px solid transparent; border-radius: 16px; background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF); } ``` [Codepen demo](https://codepen.io/mudontire/pen/wvqvZZO) 目前就能想到这5种方法，个人推荐优先使用4和5，如果有其他更好的方法，欢迎大家补充。