如果可能,我想使用CSS为图像创建一个插入边框半径,我发布这个问题,因为到目前为止我在网上找到的所有解决方案都是用于文本和使用div。
这是我希望实现的目标:
谢谢!
答案 0 :(得分:3)
一种方式:
<div class="container">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
<div class="dot4"></div>
<img src='http://placehold.it/400x300'>
</div>
CSS:
.container {
position:relative;
margin:50px auto;
width:400px;
}
.dot1 {
background-color:white;
width:50px;
height:50px;
border-radius:100%;
position:absolute;
left:-25px;
top:-25px;
}
.dot2 {
background-color:white;
width:50px;
height:50px;
border-radius:100%;
position:absolute;
right:-25px;
top:-25px;
}
.dot3 {
background-color:white;
width:50px;
height:50px;
border-radius:100%;
position:absolute;
right:-25px;
bottom:-25px;
}
.dot4 {
background-color:white;
width:50px;
height:50px;
border-radius:100%;
position:absolute;
left:-25px;
bottom:-25px;
}
演示:http://jsfiddle.net/ofejxfj6/
你可以调整一下(圆圈/点和尺寸的大小),但它非常接近,恕我直言。