如何用CSS3做一个径向渐变的圆框？

Question

我需要围绕透明中心创建一个圆形框架。边框从内边框到外边框呈径向渐变。

回合 div 很容易，边界半径为 50%。

问题是向边框添加径向渐变。我尝试了 border-image, border-color, box-shadow, radial-gradient 但没有成功，而 background-image 我没有设法拥有透明中心。

有什么建议吗？

谢谢，恩里科

Answer 1

您可以使用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>

如何用CSS3做一个径向渐变的圆框？

How to make a round frame with radial gradient with CSS3?

css

gradient

border

radial-gradients

radial