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

Question

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

我使用border-image作为内部版本，但我不知道如何创建其他边框。

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

Answer 1

使用额外的伪元素：

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

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

使用单个元素：

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

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

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;