Css 一个div有3个边界底部？

有没有办法将3个

边框底部

s创建为一个

div

以下是它需要的外观：

---

您可以尝试使用双边框、边框半径和阴影来实现这一点

.class {
    border-radius: 5px 5px 5px 5px;
    border-bottom: 3px double #BBBBBB;
    box-shadow: 0px 3px 3px rgba(187,187,187, 1);
}

---

您可以使用

border-bottom: 3px double #BBBBBB;"

如果需要三行，则需要使用三个不同的div

border-bottom: 1px solid #BBBBBB;

用三个容器。对于最后一个div，请提供阴影效果

是实现上述输出的一种方法

HTML

<div class="borderBox">
  <div class="innerCnt">
    <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
    </ul>
  </div>
</div>

试试这个

#盒子{
宽度：100px；
高度：100px；
背景：蓝色；
盒影：0px 3px绿色，0px 6px橙色，0px 9px黄色；
边界半径：5px；
}

完全跨浏览器的简单解决方案是使用三个元素。花哨的pancy CSS3解决方案是使用方框阴影，它支持逗号分隔列表，并根据需要使用任意多个阴影。不建议进行无注释的下一票。好吧，现在可以应用三个阴影，什么abt边界？@NaveenKumarPG您可以这样做，但这是一项大量工作

.innerCnt {
  background: #fff;
  position: relative;
  z-index: 1;
  border-radius: 5px;
}
.innerCnt ul {
  margin: 0
}
.borderBox {
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 8px;
  position: relative;
}
.borderBox:after,
.borderBox:before {
  border: 1px solid #ccc;
  content: " ";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 1px;
  border-radius: 8px;
}
.borderBox:after {
  top: 3px;
  border-radius: 7px;
}

<div id="box"></div>  

#box{
width:100px;
height:100px;
background:blue;
box-shadow: 0px 3px  green,0px 6px  orange,0px 9px  yellow;
border-radius:5px;
}