在CSS中制作翘边阴影效果的方法是什么

发布时间：2023-09-26 14:48:15 所属栏目：语言来源：

导读：本文介绍了CSS 翘边阴影的实现代码，分享给大家。具体如下：

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

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

HTML代码

<ul c

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

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!