元素上的徑向框陰影

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>