CSS3实现曲线阴影和翘边阴影

最新推荐文章于 2022-09-22 09:35:03 发布

VIP文章卡夫卡的baby

最新推荐文章于 2022-09-22 09:35:03 发布

阅读量209

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/weixin_72303943/article/details/126047197

版权

CSS3实现曲线阴影和翘边阴影

html：

<div class="wrap effect">
        <h1>shadow effect</h1>
        <!-- ul.pic>li*3>img -->
        <ul class="pic">
            <li><img src="./img/7.webp" alt=""></li>
            <li><img src="./img/4.webp" alt=""></li>
            <li><img src="./img/5.webp" alt=""></li>
        </ul>
    </div>

CSS样式：

<title>CSS3实现曲线阴影和翘边阴影</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .wrap{
            width: 70%;
            height: 200px;
            margin: 50px auto;
            background-color: #fff;
        }
        .wrap h