如何用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制作具有径向渐变的圆形框架？

回答

相关问题