如何用CSS3製作具有徑向漸變的圓形框架？

我需要在透明中心周圍創建一個圓框。該框架具有從內邊界到外邊界的徑向漸變。如何用CSS3製作具有徑向漸變的圓形框架？

圓div很容易與邊界半徑50％。

問題是向邊界添加了徑向漸變。我嘗試使用border-image，border-color，box-shadow，radial-gradient沒有任何成功，而使用background-image我沒有設法使透明中心。

有什麼建議嗎？

感謝，恩里科

來源

2017-06-02 DoctorC

你試過'邊界半徑：50％'？ –

我的不好。我有一個圓形的邊框，但我不知道如何製作徑向漸變。我要編輯我的問題 – DoctorC

您可以使用box-shadow

.radial-thinggy { 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 80px; 
 
    background-color: transparent; 
 
    border-radius: 50%; 
 
    box-shadow: 0 0 10px 10px rgba(255,69,0,1), 
 
       0 0 20px 20px rgba(255,140,0,1), 
 
       0 0 30px 30px rgba(255,255,0,1); 
 
} 
 

 
body { 
 
    background-color: cornflowerblue; 
 
}

<div class="radial-thinggy"></div>

來源

2017-06-02 18:09:45

太好了。有用。謝謝。我在發佈之前試過用box-shadow，但是我無法使它正常工作... – DoctorC

我更新了你的答案，希望它沒問題:) – LGSon

@LGSon太棒了，謝謝。 –

如何用CSS3製作具有徑向漸變的圓形框架？

回答

相關問題