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

-1

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

嗨，我是新来的网页设计，我正在努力如何使这种类型的边界。如果有人可以提出解决方案，它会非常有帮助。谢谢。

来源

2017-03-16 xakar

你有没有试着用搜索引擎术语 “多边界” 或 “梯度边界？”我做了，我立即想出了几个解决方案。互联网是人类历史上最伟大的研究工具。不要使用它不要欺骗自己。 – MarsAtomic

与第一个答案去。

有一个简单得多的方式来做到这一点使用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>

来源

2017-03-17 04:10:27

我坚持这个border.I不明白我怎么能做出这种类型border.If任何人建议我，它会帮助我很多。

下面的东西应该会创建圆角，但是，如果您认为有必要插入合适的图像并更改颜色，则由您决定。

我已经使用了CSS3border-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>

来源

2017-03-16 20:48:47

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

回答

相关问题