谁能告诉我如何使用bootstrap / CSS在图像上做边框？

Question

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

require(['d3-selection', 'd3-timer', 'd3-array', 'd3-collection', 'd3-interpolate', 'd3-color', 'd3-shape'], function(d3) {
require(['d3-sankey'], function(dsankey) {
  //****** CREATE DIVS ******//
  // .....
  var graph = dsankey.sankey()
    .nodeWidth(15)
    .nodePadding(10)
    .size([width, height]);
  //****** END CREATE CHART ******//
});
});

Css

 <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>

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>

  

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