首頁 > web前端 > css教學 > 如何在沒有影像或技巧的情況下創建水平盒陰影?

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

Mary-Kate Olsen
發布: 2024-12-01 11:06:11
原創
358 人瀏覽過

How to Create Horizontal Box Shadows Without Images or Tricks?

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板