如何为一个元素实现两种不同的线性渐变边框？

Question

我是 CSS 的新手，我的任务是创建 2 个线性渐变作为 div 的边框，如下图所示。

我使用 border-image 作为内部边框，但我不知道如何创建另一个边框。

border-image: linear-gradient(#EEEEEE ,#666666, #EEEEEE) 1 1% !important;

Answer 1

使用额外的伪元素：

我认为使用 border-image 只用一个元素（即没有额外的 pseudo/real 元素）是不可能做到这一点的，但是你可以使用伪元素来做到这一点在父元素上设置一个边框，在伪元素上设置另一个边框，如下面的代码片段所示。

div{
  position: relative;
  height: 200px;
  width: 400px;
  border-image-source: linear-gradient(to bottom, #FFFFFF, #CCCCCC 50%, #FFFFFF);
  border-style: solid;
  border-width: 5px;
  border-image-slice: 1;
}
div:before{
  position: absolute;
  content: '';
  height: calc(100% - 10px);
  width: calc(100% - 10px);
  border-image-source: linear-gradient(to bottom, #EEEEEE, #666666 50%, #EEEEEE);
  border-style: solid;
  border-width: 5px;
  border-image-slice: 1;
}

<div></div>

使用单个元素：

只有一个元素（没有 pseudo/real 个元素），我们可以使用 background-image 而不是 border-image 来实现这个 ^* ].它要复杂得多，因为我们必须为 8 个（4 个外 + 4 个内）边框中的每一个创建一个渐变条，然后相应地放置它们。

^{* - 这不会产生与 border-image 完全相同的输出，但足够接近。}

div{
  height: 200px;
  width: 400px;
  background: linear-gradient(to right, #FFFFFF, #FFFFFF),
    linear-gradient(to bottom, #FFFFFF, #CCCCCC 50%, #FFFFFF),
    linear-gradient(to right, #FFFFFF, #FFFFFF),
    linear-gradient(to bottom, #FFFFFF, #CCCCCC 50%, #FFFFFF),
    linear-gradient(to right, #EEEEEE, #EEEEEE),
    linear-gradient(to bottom, #EEEEEE, #666666 50%, #EEEEEE),
    linear-gradient(to right, #EEEEEE, #EEEEEE),
    linear-gradient(to bottom, #EEEEEE, #666666 50%, #EEEEEE);
  background-repeat: no-repeat;
  background-size: 100% 5px, 5px 100%, 100% 5px, 5px 100%, calc(100% - 10px) 5px, 5px calc(100% - 10px), calc(100% - 10px) 5px, 5px calc(100% - 10px);
  background-position: 0px 0px, 100% 0px, 0px 100%, 0px 0px, 5px 5px, calc(100% - 5px), 0px calc(100% - 5px), 5px 5px;
}

<div></div>

如何为一个元素实现两种不同的线性渐变边框？

How to implement two different linear gradient borders to an element?

css

border

linear-gradients

border-image