html - border-bottom 长度小于 border-right？

Question

Border-bottom长度小于border-right怎么办？

img {
    border-bottom: 5px solid #02a8d8;
    border-right:1px solid  rgb(102, 102, 102);
    padding-right: 10px;
}

Answer 1

你必须使用 :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>