图像的边界边界半径[重复]

Question

这个问题已经在这里有了答案：

• 在CSS中倒圆角？ 11个答案
• CSS：半径为负的边框[重复] 2个答案

我想尽可能使用CSS为图像创建插入边框半径，我发布此问题是因为到目前为止我在网上找到的所有解决方案都是针对文本和使用div的。

这是我希望实现的目标：

谢谢！

Answer 1

单程：

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

您可以对其进行一些调整（圆圈/点的大小和尺寸），但是它非常接近，恕我直言。