css翘边阴影图片,【CSS】翘边阴影

仔细观察可以看到每张图片下面的两个角都有不同程度的翘边。

实现原理和【CSS】曲线阴影差不多，也是通过伪元素来实现。

HTML代码

• 
• 
• 

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