消息关闭
    暂无新消息!

如何实现带阴影的不规则容器?

问题作者 : 旺旺2017-05-01发布

1、效果图:

2、我做出的效果:

2、缺口处的阴影处理,实在没有思路,请问大家怎么实现这种效果呢?


8个回答

︿ 0

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

︿ 0

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

︿ 0

用box-shadow的inset

<div class="bar">
      <div class="garden"></div>
    </div>
<style>
      .bar{
        position:relative;
        height: 35px;
        background: #D9D9D9;
        box-shadow: inset 0 -8px 15px rgba(72, 69, 69, 0.31);
        z-index:2;
      }
      .bar .garden{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 150px;
        height: 150px;
        margin-left: 50%;
        background-color: #D9D9D9;
        box-shadow: inset 0 -8px 15px rgba(72, 69, 69, 0.31);
        transform: translate(-50%,50%);
        border-radius:100%;
      }
      .bar .garden::after{
        content:"";
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:50%;
        background-color:#fff;
      }
    </style>

效果大概就是这样子的,那个圆你用自己写的,在里面加上inset,或者你使用CSS3中的radial-gradient来实现

︿ 0
div: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

html:

<div class="boxAll">
    <div class="boxA">

    </div>
    <div class="box"></div>
</div>

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>

效果:

︿ 0

背景直接放图片,最直接了。 或者拿svg做背景,可以画不规则图形,再往上加阴影,多叠几层应该可以实现。