如何僅在元素的左側和右側建立框陰影？

盒子陰影自訂：僅在左側和右側實現陰影

為了增強元素的視覺吸引力，您的目標是合併僅出現在左側和右側的框陰影。然而，您目前的實施導致陰影出現在所有側面。為了應對這項挑戰，讓我們探索使用多個盒子陰影的解決方案。

首先，讓我們專注於在所需側面實現陰影。透過調整屬性內的值，您可以設定水平和垂直偏移。觀察以下程式碼：

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

在此範例中，第一個 box-shadow 建立一個距離左邊緣 12 像素、下方 15 像素的陰影，並向右延伸。第二個 box-shadow 模擬右側的陰影。

但是，由於頂部和底部邊緣缺少陰影，您可能會注意到陰影中存在輕微間隙。為了解決這個問題，需要額外的盒子陰影：

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

這些額外的陰影透過在元素周圍創建白色「邊框」來引入遮罩。這有效地隱藏了間隙，從而產生乾淨的水平陰影。

請記住，這種技術可能並不完美，您可能會遇到一些小瑕疵。然而，它提供了一種實用的方法來僅在左側和右側實現陰影，從而增強元素的美感。

以上是如何僅在元素的左側和右側建立框陰影？的詳細內容。更多資訊請關注PHP中文網其他相關文章！