html - 在圆形图像周围添加一个圆圈

Question

我使用以下 HTML 创建了一个圆形图像

<div class="thumb">
<img src="http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="img">
</div>

和CSS

.thumb{
width: 150px;
height: 150px;
overflow: hidden;
border-radius: 50%;
}

我尝试在圆形图像周围添加一个新圆圈，但最终失败了。我该怎么做？我应该创建一个新的 div 并在其中添加这个圆形图像并设置该 div 的样式以使其成为圆形吗？我试图在这个谷歌链接中获得带圆圈的图像 https://www.gmail.com/intl/en/mail/help/about.html它位于 slider 的正下方。这是我到目前为止得到的 fiddle http://jsfiddle.net/adityasingh773/rzsmpmc9/

Answer 1

这不是那么优雅的解决方案，因为它需要额外的 html，但看起来还不错，恕我直言:(没有试验伪元素，也许可以实现类似的结果)。

<div class="thumb-wrapper">
<div class="thumb">
<img src="http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="img">
</div> 
    </div>

CSS:

.thumb-wrapper {
  width: 170px;
    height: 170px;
    overflow: hidden;
    border-radius: 50%; 
    background-color:#fefefe;
    position:relative;
    box-sizing:border-box;
    border:1px solid #dedede;
   -webkit-box-shadow: -5px 4px 19px 0px rgba(143,143,143,1);
-moz-box-shadow: -5px 4px 19px 0px rgba(143,143,143,1);
box-shadow: -5px 4px 19px 0px rgba(143,143,143,1);
}
.thumb{
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 50%;
    position:absolute;
    left:8px;
    top:9px;
     box-sizing:border-box;

}

演示:http://jsfiddle.net/rzsmpmc9/5/