Html 在圆形图像周围添加圆

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

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

我尝试在圆形图像周围添加一个新的圆圈，但最终失败了。我该怎么做？我是否应该创建一个新的

div

，并在其中添加此圆形图像，并设置该div的样式以使其圆形？我试图在这个位于滑块正下方的谷歌链接中获得圆形图像。

---

这是我到目前为止所得到的资料

是否尝试添加边框

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

---

可选地您可以使用长方体阴影生成实体阴影，因为阴影不会在元素位置和大小内计算，从而避免干扰当前布局。

是否尝试添加边框

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

---

可选地您可以使用框阴影生成实体阴影，因为阴影不会在元素位置和大小内计算，从而避免干扰当前布局。

您只需向现有css添加边框即可

border: 3px blue solid;

---

您只需在现有css中添加边框即可

border: 3px blue solid;

---

这不是一个很好的解决方案，因为它需要额外的html，但看起来很好，imho：（没有尝试使用伪元素，也许可以获得类似的结果）

---

演示：

这不是一个优雅的解决方案，因为它需要额外的html，但看起来很不错，imho:（没有尝试伪元素，也许可以获得类似的结果）

---

演示：

如果您使用图像，您可以获得与您提供的链接相同的样式，这是最合理的方式，但是如果您使用

框阴影

您很可能会得到相同的效果

box-shadow:2px 2px 4px green, -2px -2px 4px red;

---

选中

如果你使用图像，你可以获得与你提供的链接相同的风格，这是最合理的方式，但是如果你使用

框影

你很可能会得到同样的效果

box-shadow:2px 2px 4px green, -2px -2px 4px red;

---

检查

是的，我试过了，但这只是在图像周围创建了额外的圆形边框，而不是正方形circle@LuckyAli是的，我最初的解决方案建议使用轮廓，但它不适用于圆角。答案已经更新了…这是和Indubitable给出的相同的解决方案，但我想在边框和圆形图像之间实现一些填充。我该怎么做？在这种情况下，你可以使用。是的，我试过了，但那只是在图像周围创建了额外的圆形边框，而不是正方形circle@LuckyAli是的，我最初的解决方案建议使用轮廓，但它不适用于圆角。答案已经更新了…这是和Indubitable给出的相同的解决方案，但我想在边框和圆形图像之间实现一些填充。我该怎么做？那样的话，你可以用。我在你的小提琴上，在你的

.thumb

CSS的末尾又加了两行<代码>边框：7px实心#eee和

框阴影：1px 1px 12px 8px#ccc这与您引用的页面非常接近。玩像素扩散的阴影，阴影的位置，和颜色，你应该能够得到你想要的。不需要额外的标记。请看cvsguimaraes的答案。我在上找到了你的小提琴，在你的
.thumb
CSS的末尾又加了两行<代码>边框：7px实心#eee和
框阴影：1px 1px 12px 8px#ccc这与您引用的页面非常接近。玩像素扩散的阴影，阴影的位置，和颜色，你应该能够得到你想要的。不需要额外的标记。参见cvsguimaraes的答案。
box-shadow:2px 2px 4px green, -2px -2px 4px red;