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

Question

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

Answer 1

I am stuck with this border.I don't understand how can i make this type of border.If anybody suggest me it'll helps me a lot.

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

我已经使用 CSS3 border-radius 属性来提供 div 元素 "rounded corners".

<!DOCTYPE html>
<html>
<head>
<style> 
#rcorners1 {
    border-radius: 150px;
    background: #f4e242;
    padding: 20px; 
    width: 200px;
    height: 200px;    
}
#rcorners2 {
    border-radius: 150px;
    background: #f4d041;
    padding: 20px; 
    width: 160px;
    height: 160px;    
}

#rcorners3{
    border-radius: 150px;
    background: #f4c741;
    padding: 20px; 
    width: 120px;
    height: 120px;    
}


</style>
</head>
<body>

<div id="rcorners1">
  <div id="rcorners2">
   <div id="rcorners3">
   
   </div>
   </div>
</div>

</body>
</html>

Answer 2

选择第一个答案。

There is a much more simple way to do this using pseudo-elements

。优点是整个布局只需要一个 class。很简单。

*{
  margin: 0;
}

.circle{
  width: 100px;
  height: 100px;
  background: #f4c741;
  border-radius: 50%;
  position: relative;
  margin: 50px auto;
}
.circle:before, .circle:after{
  content: '';
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  
}
.circle:before{
  width: 100px;
  height: 100px;
  border: 15px solid #f4d041;
}
.circle:after{
  border: 20px solid #f4e242;
  width: 125px;
  height: 125px;
}

<div class="circle"></div>

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

How can I add rounded borders around an image?

html

css

psd

border