干货分享｜CSS 实现边框底部渐变色的四种妙招，简单好上手！

2023-02-06 03:15:54

边框底部渐变色：提升网页设计的魅力

在网页设计的广阔天地中，边框不仅仅是元素的轮廓；它们更是自由发挥的画布，能够添加微妙的细节和引人入胜的视觉效果。其中，边框底部渐变色 脱颖而出，因为它为元素增添了灵动感和深度感，让整个设计更显精致和层次分明。

虽然实现边框底部渐变色看似复杂，但本文将揭开四种简单有效的 CSS 方法，让你轻松掌握这一设计技巧，为你的作品注入活力和个性！

方法一：单层元素巧夺天工

这是我最钟爱的技巧，因为它只使用一个元素，代码简洁而优雅。我们需要设置三个属性：background-clip、background-origin 和 background-image。每个属性设置两组值，第一组用于设置边框内的单色背景，第二组用于设置边框上的渐变色。

.element {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to bottom, #fff 0%, #000 100%), linear-gradient(to bottom, #000 0%, #fff 100%);
}

在这个示例中，我们定义了一个名为 .element 的类，并设置了它的宽、高和边框。接着，使用 background-clip 和 background-origin 属性指定背景裁剪区域和背景原点。对于边框内的单色背景，我们将其裁剪为 padding-box，并将其原点设置为 padding-box。对于边框上的渐变色，我们将其裁剪为 border-box，并将其原点设置为 border-box。

最后，使用 background-image 属性设置两个渐变色背景。第一个渐变色从白色过渡到黑色，用于边框内的单色背景。第二个渐变色从黑色过渡到白色，用于边框上的渐变色。

方法二：双层元素叠影生辉

这种方法使用两个盒子叠加来实现边框底部渐变色。我们给外层盒子设置渐变色背景和内边距，给内层盒子设置纯色背景。这样，外层盒子的渐变色就会透过后者，形成边框底部渐变色的效果。

.outer-box {
  width: 200px;
  height: 200px;
  padding: 10px;
  background: linear-gradient(to bottom, #fff 0%, #000 100%);
}

.inner-box {
  width: 100%;
  height: 100%;
  background: #fff;
}

在这个示例中，我们定义了一个名为 .outer-box 的外层盒子，并设置了它的宽、高和内边距。接着，使用 background 属性为其设置一个从白色过渡到黑色的渐变色背景。

接下来，定义一个名为 .inner-box 的内层盒子，并设置它的宽和高为 100%，使其完全覆盖 .outer-box。最后，使用 background 属性为其设置纯白色背景。

方法三：伪元素妙笔生花

这种方法巧妙地使用伪元素将边框分割成两部分，分别设置不同的颜色或渐变色，实现边框底部渐变色的效果。

.element {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}

.element::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, #fff 0%, #000 100%);
}

在这个示例中，我们定义了一个名为 .element 的元素，并设置了它的宽、高和边框。接着，使用 ::before 伪元素创建一个新的元素，并将其绝对定位在 .element 的顶部。

接下来，设置伪元素的宽和高，使其占据 .element 的 50% 高度。最后，使用 background 属性为其设置一个从白色过渡到黑色的渐变色背景。

方法四：混合模式巧妙融合

这种方法使用混合模式巧妙地将两个渐变色融合在一起，实现边框底部渐变色的效果。

.element {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  background: linear-gradient(to bottom, #fff 0%, #000 100%);
  mix-blend-mode: multiply;
}