边长小于div宽度？

Question

我有以下代码

div {

   width:200px;

   border-bottom:1px solid magenta;

   height:50px;   

}

DEMO

div宽度为200px，因此border-bottom也是200px但是如果我想边框底部只有100px而不改变div宽度该怎么办？

Answer 1

您可以使用线性渐变：div {&nbsp; &nbsp; width:100px;&nbsp; &nbsp; height:50px;&nbsp; &nbsp; display:block;&nbsp; &nbsp; background-image: linear-gradient(to right, #000 1px, rgba(255,255,255,0) 1px), linear-gradient(to left, #000 0.1rem, rgba(255,255,255,0) 1px); background-position: bottom; background-size: 100% 25px; background-repeat: no-repeat;&nbsp; &nbsp; border-bottom: 1px solid #000;&nbsp; &nbsp; border-top: 1px solid red;}<div></div>