导航：首页 > 开发技术 >

利用CSS如何创建渐变色边框

发表于：2024-11-13 作者：千家信息网编辑

千家信息网最后更新 2024年11月13日，这篇文章将为大家详细讲解有关利用CSS如何创建渐变色边框，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。给 border 设置渐变色是很常见的效果，实现这个效果有很多

千家信息网最后更新 2024年11月13日利用CSS如何创建渐变色边框

这篇文章将为大家详细讲解有关利用CSS如何创建渐变色边框，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

给 border 设置渐变色是很常见的效果，实现这个效果有很多思路，今天把我所知道的方法罗列于此供大家参考。（学习视频分享：css视频教程）

1. 使用 `border-image`

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

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

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:

      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:

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

  
      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:

.border-box {  border: 4px solid transparent;  border-radius: 16px;  position: relative;  background-color: #222;  background-clip: padding-box; /*important*/}.border-bg {  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/yLoLrxL

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

我们可以使用伪元素替换 div.border-bg 以简化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:

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

      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:

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