Question

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

Answer 1

我被这个边界困住了。我不明白我该怎么做边境的类型。如果有人建议我，它会帮助我很多。

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

我使用CSS3 border-radius属性来提供div元素＆＃34;圆角＆＃34;。

＆＃13;

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

＆＃13;

Answer 2

回答第一个答案。

使用pseudo-elements
执行此操作有一种更简单的方法

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

＆＃13;

*{
  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;
}

＆＃13;

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

＆＃13;

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

2 个答案: