带边框图像的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 {
 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>