如何使边框底部长度小于边框右边?
img {
border-bottom: 5px solid #02a8d8;
border-right:1px solid rgb(102, 102, 102);
padding-right: 10px;
}
答案 0 :(得分:0)
您必须使用:after
并设置您希望border-bottom
拥有的宽度,然后将其position: absolute
定位到bottom: 0
。像这样的东西
.image {
border: 1px solid black;
border-bottom: none;
position: relative;
display: inline-block;
box-sizing: border-box;
}
.image img {
width: 100%;
float: left;
}
.image:after {
position: absolute;
bottom: 0;
width: 60%;
border-top: 1px solid black;
content: "";
left: 50%;
transform: translateX(-50%);
}

<div class="image">
<img src="http://placehold.it/350x160">
</div>
&#13;