如何在图像周围添加圆形边框？ [关闭]答案

【问题标题】：How can I add rounded borders around an image? [closed]如何在图像周围添加圆形边框？ [关闭]
【发布时间】：2017-03-16 20:36:02
【问题描述】：

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

【问题讨论】：

你试过用谷歌搜索“多边框”或“渐变边框”吗？我做到了，我马上想出了几个解决方案。互联网是人类历史上最伟大的研究工具。不要通过不使用它来欺骗自己。

标签： html css border psd

【解决方案1】：

我被这个边框卡住了。我不明白我该怎么做边框类型。如果有人建议我，它会对我有很大帮助。

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

我使用了CSS3 border-radius 属性来提供div 元素“圆角”。

<!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>

【讨论】：

【解决方案2】：

选择第一个答案。

使用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;
}

&lt;div class="circle"&gt;&lt;/div&gt;

【讨论】：