css - 谁能告诉我如何使用 bootstrap/CSS 在图像上制作边框？

Question

这是图像。我已经制作了 UI，但在制作边框时需要帮助，因为它在图像中给出

 <div>
     <img class='image1' src='https://www.w3schools.com/w3css/img_lights.jpg' />
     <img class='image2' src='https://www.w3schools.com/w3css/img_lights.jpg' />         
 </div>

CSS

div {
   text-align: center
}
.image1 {
   border: 15px solid seagreen; 
   outline: 15px solid green;
   width:'150px';
   height:'150px';
   border-radius: 75%
}   
.image2 {
   border: 15px solid seagreen;
   position: relative;
   right:25px;
   width:'150px';
   height:'150px';
   border-radius: 75%
}

标签： cssbootstrap-4

Answer 1

您提供的代码稍作修改。

.parent-div {
  margin-top: 100px;
}

div {
  text-align: center;
}

.image1 {
  border: 15px solid seagreen;
  width: 150px;
  height: 150px;
  border-radius: 75%;
  border-right-color: transparent;
}

.image2 {
  border: 15px solid seagreen;
  position: relative;
  right: 80px;
  width: 150px;
  height: 150px;
  border-radius: 75%;
  border-left-color: transparent;
}

.imageH {
  width: 150px;
  height: 150px;
  border-radius: 75%;
}

.ib {
  display: inline-block;
}

.left-img {
  position: relative;
  z-index: -15;
  width: 175px;
  height: 175px;
  border: 20px solid seagreen;
  border-radius: 75%;
  top: -200px;
  left: 17px;
  opacity: 0.3;
}

.right-img {
  left: -100px;
  opacity: 0.3;
  position: relative;
  z-index: -15;
  width: 175px;
  height: 175px;
  border: 20px solid seagreen;
  border-radius: 75%;
  top: -200px;
}

<div class="parent-div">
  <img class="image1" src="https://www.w3schools.com/w3css/img_lights.jpg" />
  <img class="image2" src="https://www.w3schools.com/w3css/img_mountains.jpg" />

  <div class="">
    <div class="left-img ib">
      <img class="imageH" src="https://www.w3schools.com/w3css/img_lights.jpg" />
    </div>
    <div class="right-img ib">
      <img class="imageH" src="https://www.w3schools.com/w3css/img_lights.jpg" />
    </div>
  </div>
</div>

可以根据需要修改类名和图像。