css翘边阴影图片,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);

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。