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

Question

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

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

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

Answer 1

使用额外的伪元素：

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

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>

---

使用单个元素：

仅使用一个元素（没有伪/真实元素），我们可以在某种程度上实现这个^* usingbackground-image但不是 with border-image。它要复杂得多，因为我们必须为 8 个（4 个外部 + 4 个内部）边界中的每一个创建一个渐变条，然后相应地放置它们。

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

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>