元素上的径向盒阴影

Question

有没有办法创建一个从矩形div元素以圆圈辐射的盒子阴影？所以像普通的阴影一样，除了圆形。

Answer 1

严格来说 - 没有。盒子阴影与它所分配的对象的形状相关联。

这就是说 - 假设您的代码允许嵌套的div元素 - 您可以通过将包装div设置为带阴影的圆形，并使用矩形元素设置内部div来有效地完成此操作。

.wrapper {
  /* Equal width and height create a perfect square */
  width: 300px;
  height: 300px;
  /* Adding a border-radius of 1/2 width or height (same value) */
  /* turns that square into a circle */
  border-radius: 150px;
  /* Apply your box-shadow styles, which inherit the round .wrapper shape */
  box-shadow: 0px 0px 200px #444444;
}

.content {
  /* Apply .content styles as needed; */
  /* will display on top of the round shadow */
  background-color: yellow;
}

<div class="wrapper">
  <div class="content">Content Here</div>
</div>