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>