如何僅在元素的水平側創建盒子陰影？

僅在水平面上創建盒子陰影

要實現僅跨越元素左側和右側（水平）側面的盒子陰影，請考慮利用多個盒子陰影定義。

初始盒子陰影屬性，

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

在元素的所有側面產生陰影。要僅定位左側和右側，請添加兩個單獨的框陰影：

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

這將創建一個向右延伸12 像素、向左延伸-12 像素的陰影，從而達到所需的效果。

您也可能會遇到頂部和底部陰影輕微滲色的情況。為了緩解這種情況，請添加兩個額外的框架陰影來掩蓋滲透：

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中文網其他相關文章！