CSS 翘边阴影的实现代码

前端  /  管理员 发布于 7年前   155

本文介绍了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);}

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