建立單面投影
實現僅影響元素一側的投影可能是 Web 中的常見要求設計。例如，您可能會遇到這樣的場景，您希望陰影落在元素下方而不與相鄰元素重疊。
實現此效果的一種方法是透過 box-shadow 屬性，它允許您指定大小元素周圍的陰影的、擴散和顏色。然而，box-shadow 的預設行為是在元素的所有側面創建陰影。
建立僅底部的陰影
建立下拉陰影陰影僅顯示在元素下方，您可以建立一個偽元素並將其放置在父元素的底部。然後，這個偽元素將會收到陰影效果。
這是使用現代CSS 語法從原始問題中更新的範例：
#box {
background-color: #3D6AA2;
width: 160px;
height: 90px;
position: absolute;
top: calc(10% - 10px);
left: calc(50% - 80px);
}
.box-shadow:after {
content: "";
position: absolute;
width: 100%;
bottom: 1px;
z-index: -1;
transform: scale(.9);
box-shadow: 0px 0px 8px 2px #000000;
}此程式碼將創建一個僅向下延伸的陰影#box 元素的底部，有效地給人留下僅底部陰影的印象。偽元素位於底部，z-index 為 -1，以確保它出現在主元素後面。
以上是如何在 CSS 中建立單面陰影？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
