html5 - 如何實現(xiàn)帶陰影的不規(guī)則容器?
問題描述
問題解答
回答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;}
當然這樣最上面還會有個黑影,你可以改成兩層,內(nèi)層畫一個圓而不是半圓,overflow:hidden,然后相對外層上移半圓的距離就行了
回答3:filter: drop-shadow()或者,必要時用clip-path切割你的容器形狀。使用svg也是一個不錯的選擇。但以上方法都存在兼容性問題。
回答4:大家有實現(xiàn)的可以給個Demo,目前為止,這個效果我還沒實現(xiàn),,這個效果的細節(jié)是:直線處的陰影在缺口處能很自然的凹陷下去,,現(xiàn)在的思路是實現(xiàn)一個整體的不規(guī)則的容器,然后給這個容器上個陰影,,如果使用一個方形和一個半圓拼湊,我試過,陰影不自然
相關文章:
1. debian - docker依賴的aufs-tools源碼哪里可以找到啊?2. angular.js使用$resource服務把數(shù)據(jù)存入mongodb的問題。3. docker - 如何修改運行中容器的配置4. macos - mac下docker如何設置代理5. docker start -a dockername 老是卡住,什么情況?6. docker網(wǎng)絡端口映射,沒有方便點的操作方法么?7. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣?這個是怎么回事????8. docker api 開發(fā)的端口怎么獲取?9. dockerfile - 我用docker build的時候出現(xiàn)下邊問題 麻煩幫我看一下10. docker gitlab 如何git clone?

網(wǎng)公網(wǎng)安備