Html 如何在图像周围添加圆形边框？

嗨，我是网页设计新手，我正在为如何制作这种类型的边框而努力。如果有人能提出解决方案，那将非常有帮助。 谢谢

我被这个边界困住了。我不明白我怎么能做到这一点 边界类型。如果有人建议我，这会帮我很大的忙

下面类似的东西应该创建圆角，但是，如果您认为有必要，您可以插入适当的图像并更改颜色

我使用了

CSS3

属性来提供

div

元素的“圆角”

#rcorners1{
边界半径：150px；
背景#f4e242；
填充：20px；
宽度：200px；
高度：200px；
}
#rcorners2{
边界半径：150px；
背景#f4d041；
填充：20px；
宽度：160px；
高度：160px；
}
#rcorners3{
边界半径：150px；
背景#f4c741；
填充：20px；
宽度：120px；
高度：120px；
}

按照第一个答案进行

使用

伪元素

。优点是整个布局只需要一个

类

。很简单

*{
保证金：0；
}
.圆圈{
宽度：100px；
高度：100px；
背景#f4c741；
边界半径：50%；
位置：相对位置；
保证金：50px自动；
}
.circle:之前，.circle:之后{
内容：''；
位置：绝对位置；
边界半径：50%；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.圆圈：之前{
宽度：100px；
高度：100px；
边框：15px实心#f4d041；
}
.圆圈：之后{
边框：20px实心#f4e242；
宽度：125px；
高度：125px；
}

---

你有没有试过用谷歌搜索“多重边界”或“梯度边界”这两个术语？我有，我马上想出了几个解决方案。互联网是人类历史上最伟大的研究工具。不要不使用它来欺骗自己。