【CSS】翘边阴影

仔细观察可以看到每张图片下面的两个角都有不同程度的翘边。
实现原理和【CSS】曲线阴影差不多，也是通过伪元素来实现。

HTML代码

<ul class="box">
    <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="......" alt=""></li>
    <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="......" alt=""></li>
    <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="......" alt=""></li></ul>

CSS代码

ul,li {    list-style:none;
}.box {    width: 980px;    height: auto;    clear: both;    overflow: hidden;    margin: 20px auto;
}.box li {    width: 300px;    height: 210px;    position: relative;    background: #fff;    float: left;    margin: 20px 10px;    border: 2px solid #efefef;    box-shadow: 0 1px 4px rgba(0, 0, 0, .27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
}.box li img {    display: block;    width: 290px;    height: 200px;    margin: 5px;
}.box li:before, .box li:after {    content: '';    position: absolute;    z-index: -2;    width: 80%;    height: 80%;    bottom: 8px;    background: transparent;    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6);
}.box li:before {    left: 7%;    transform: skewX(-12deg) rotate(-4deg);
}.box li:after {    right: 7%;    transform: skewX(12deg) rotate(4deg);
}

作者：滑滑兔
链接：https://www.jianshu.com/p/73162f41189e