这是图像。我已经制作了用户界面,但需要帮助制作图像中给出的边框
<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%
}
最佳答案
您提供的代码已稍作修改。
.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>
The class names and the images can be modified as required.
关于css - 谁能告诉我如何使用 bootstrap/CSS 在图像上制作边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53140409/