html5 - 如何实现带阴影的不规则容器？

问题描述

问题解答

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，然后相对外层上移半圆的距离就行了

filter: drop-shadow()或者，必要时用clip-path切割你的容器形状。使用svg也是一个不错的选择。但以上方法都存在兼容性问题。

大家有实现的可以给个Demo，目前为止，这个效果我还没实现，，这个效果的细节是：直线处的阴影在缺口处能很自然的凹陷下去，，现在的思路是实现一个整体的不规则的容器，然后给这个容器上个阴影，，如果使用一个方形和一个半圆拼凑，我试过，阴影不自然