css - 元素上的径向框阴影

Question

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

Answer 1

严格来说 - 不。 box-shadow 与其分配给的对象的形状相关联。

就是说 - 假设您的代码允许嵌套 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>