html5 - 如何實現帶陰影的不規則容器?
問題描述
問題解答
回答1:html:
<p class='boxAll'> <p class='boxA'> </p> <p class='box'></p></p>
css
<style>.boxAll{ width: 400px; height:500px; border: 1px solid #333333; position: relative; background: #D9D9D9;}.boxA{ width: 100%; height:480px; background: #fff; top: 20px; position: absolute;}.box{ width:100px; height:50px; position: absolute; border-radius:0 0 50px 50px; background:#D9D9D9; top: 20px; left: 150px; box-shadow: 0 0 .2rem #e6D6D6;} </style>
效果:

p:before { content: ’’; display: block; position: absolute; top: 0; left: 50%; margin-left: -20px; box-shadow: inset 0px -6px 12px #444; border-radius: 0 0 40px 40px; width: 80px; height: 40px;}
當然這樣最上面還會有個黑影,你可以改成兩層,內層畫一個圓而不是半圓,overflow:hidden,然后相對外層上移半圓的距離就行了
回答3:filter: drop-shadow()或者,必要時用clip-path切割你的容器形狀。使用svg也是一個不錯的選擇。但以上方法都存在兼容性問題。
回答4:大家有實現的可以給個Demo,目前為止,這個效果我還沒實現,,這個效果的細節是:直線處的陰影在缺口處能很自然的凹陷下去,,現在的思路是實現一個整體的不規則的容器,然后給這個容器上個陰影,,如果使用一個方形和一個半圓拼湊,我試過,陰影不自然
相關文章:
1. javascript - sublime快鍵鍵問題2. javascript - immutable配合react提升性能?3. vue.js - Vue 如何像Angular.js watch 一樣監聽數據變化4. 配置Apache時,添加對PHP的支持時語法錯誤5. css - 寫頁面遇到個布局問題,求大佬們幫解答,在線等,急!~6. javascript - nodejs關于進程間發送句柄的一點疑問7. javascript - 移動端上不能實現拖拽布局嗎?8. phpstudy8.1支持win11系統嗎?9. 實現bing搜索工具urlAPI提交10. Apache 已經把網站根目錄的改為allow from all了,但是服務器還是不能訪問?

網公網安備