如何在圖像周圍添加圓角邊框？

-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

如何在圖像周圍添加圓角邊框？

回答

相關問題