使用CSS怎么实现一个翘边阴影效果

使用CSS怎么实现一个翘边阴影效果？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

HTML代码

<ul class="box">    <li><img src="......" alt=""></li>    <li><img src="......" alt=""></li>    <li><img src="......" 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);}

css的基本语法是什么

css的基本语法是：1、css规则由选择器和一条或多条声明两个部分构成；2、选择器通常是需要改变样式的HTML元素；3、每条声明由一个属性和一个值组成；4、属性和属性值被冒号分隔开。

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注编程网行业资讯频道，感谢您对编程网的支持。