css box-shadow 可以帮你做很多

最新推荐文章于 2024-07-15 15:37:59 发布

weixin_33910460

最新推荐文章于 2024-07-15 15:37:59 发布

阅读量61

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2510955/blog/760256

版权

2019独角兽企业重金招聘Python工程师标准>>>

1 书页状重影

<div class="box-shadow">
    <p>Box Shadow Example</p>
</div>

.box-shadow{
    height: 50px;
    position: relative;
    background-color: #f5f5f5;
    text-align: center;

}

.box-shadow::before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    overflow: hidden;
    box-shadow:0 1px 1px rgba(0, 0, 0, 0.2),     0 8px 0 -3px #f6f6f6,     0 9px 1px -3px
    rgba(0, 0, 0, 0.2),     0 16px 0 -6px #f6f6f6,     0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

p{
    color: #aaa;
    line-height: 50px;
}

转载于:https://my.oschina.net/u/2510955/blog/760256