css - 如何使用 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>