元素上的径向框阴影

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>