html5 - 如何实现带阴影的不规则容器？-PHP中文网问答

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

PHP中文网 2017-04-17 15:05:30

[HTML讨论组]

753

PHP中文网

认证0级讲师

全部回复(3)

黄舟2017-04-17 15:07:30 3楼

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

赞 +0

添加回复

PHP中文网2017-04-17 15:07:30 2楼

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

赞 +0

添加回复

天蓬老师2017-04-17 15:07:30 1楼

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>