如何用CSS3进行径向梯度制作圆形框架

Question

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

Border-Radius 50％的圆形DIV很容易。

问题是将径向梯度添加到边界。我尝试了边界形象，边界色，盒子阴影，径向梯度，没有任何成功，而背景图像我没有设法拥有透明的中心。

有什么建议？

谢谢Enrico

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>