我使用以下 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/
最佳答案
这不是那么优雅的解决方案,因为它需要额外的 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;
}
关于html - 在圆形图像周围添加一个圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32703605/