元素上的径向框阴影

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>