如何在沒有影像或技巧的情況下創建水平盒陰影？

How to Achieve Horizo​​​​ntal Box Shadows

如何在不借助任何技巧或圖像的情況下，僅在左右（水平？）側實現box-shadow 效果？

使用以下程式碼會產生四周圍繞的陰影效果：

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

解決方法：使用多個box-shadow

可以透過使用多個box-shadow 解決此問題，每個box-shadow對應側：

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

Masking 不完善的陰影（可選）

為了進一步掩蓋bleeding 出的效果，可以在底部和頂部添加兩層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中文網其他相關文章！