css - 带边框图像的 CSS 条纹

Question

我已经测试了几个小时，但是我似乎无法让边框图像做我想做的事。

我正在尝试将底部边框添加到带有水平条纹的 div 中。即 2px 灰色、2px 白色和 2px 灰色；即灰色和白色条纹。

像这样：

这是我到目前为止所拥有的：

.box {
  height: 50px;
  background-color: #74c5fc;
  border-style: solid;
  border-image:
      linear-gradient(
         to top, 
         #ccc 0%, 
         #ccc 33%, 
         #fff 33%, 
         #fff 66%, 
         #ccc 66%, 
         #ccc 100%
      ) 1 1 / 0 0 6px 0
    ;
}

<div class="box"></div>

我究竟做错了什么？

Answer 1

使用大切片值！

.box {
 height:100px;
 background-color: #74c5fc;
 border-style:solid;
 border-image:
      linear-gradient(
         to top, 
         #ccc 0%, 
         #ccc 33%, 
         #fff 33%, 
         #fff 66%, 
         #ccc 66%, 
         #ccc 100%
      ) 100 /0 0 6px 0;
}

<div class="box">

</div>

或者你可以这样做：

.box {
 height:100px;
 padding-bottom:6px;
 background:
  linear-gradient(#fff,#fff) 0 calc(100% - 2px)/100% 2px no-repeat, 
  linear-gradient(#ccc,#ccc) bottom/100% 6px no-repeat,
  #74c5fc content-box;
}

<div class="box">
</div>

或者像这样：

.box {
 height:100px;
 padding-bottom:6px;
 background:
  linear-gradient(to bottom, #ccc 2px,#fff 2px,#fff 4px,#ccc 4px) bottom/100% 6px no-repeat,
  #74c5fc content-box;
}

<div class="box">
</div>

您还可以考虑 box-shadow：

.box {
 height:100px;
 margin-bottom:6px;
 box-shadow:
  0 2px 0 #ccc,
  0 4px 0 #fff,
  0 6px 0 #ccc;
 background:#74c5fc;
}

<div class="box">

</div>