如何用CSS3制作径向渐变的圆形框架？

Question

我需要在透明的中心周围创建一个圆形框架。框架具有从内到外边界的径向梯度。

圆形div很容易，边界半径为50%。

问题是在边框上添加径向梯度。我尝试了边框图像，边框颜色，框阴影，径向渐变没有任何成功，而背景图像我没有设法有透明的中心。

有什么建议吗？

谢谢，恩里科

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>