CSS 3，用伪元素制作不一样的阴影效果

最新推荐文章于 2022-07-22 22:24:00 发布

tragedyxd

最新推荐文章于 2022-07-22 22:24:00 发布

阅读量1.6k

点赞数

分类专栏： FrontEnd 文章标签：前端阴影 css3 伪元素

FrontEnd 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>曲线阴影，翘边阴影</title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        list-style: none
    }
    
    .wrap {
        margin: 50px auto;
        width: 600px;
        height: 200px;
        background-color: #e1e2de
    }
    
    .wrap h1 {
        display: inline-block;
        color: #e98016;
        text-align: center;
        font-size: 30px;
    }
    
    .effect {
        position: relative;
        -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
        box-shadow: 0 0 4px rgba(0, 0, 0, .2);
        -webkti-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
        -0-box-shadow: 0 0 4px rgba(0, 0, 0, .2)
    }
    
    .effect:after,
    .effect:before {
        position: absolute;
        top: 10%;
        right: 10px;
        bottom: 0;
        left: 10px;
        border-radius: 10%;
        content: '';
        z-index: 1;
        
        -moz-box-shadow: 0 0 15px rgba(0, 0, 0, .8);
        box-shadow: 0 0 15px rgba(0, 0, 0, .8);
        -webkti-box-shadow: 0 0 15px rgba(0, 0, 0, .8);
        -0-box-shadow: 0 0 15px rgba(0, 0, 0, .8)
    }
    
    .box {
        position: relative;
        -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
        box-shadow: 0 0 4px rgba(0, 0, 0, .2);
        -webkti-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
        -0-box-shadow: 0 0 4px rgba(0, 0, 0, .2)
    }
    
    .box:after {
        position: absolute;
        top: 50%;
        right: 10px;
        bottom: 10px;
        left: 20px;
        z-index: -1;
        background: transparent;
        -moz-box-shadow: -3px 5px 20px rgba(0, 0, 0, .8);
        box-shadow: -3px 5px 20px rgba(0, 0, 0, .8);
        content: '';
        -webkit-transform: skew(0, 2deg);
        -webkti-box-shadow: -3px 5px 20px rgba(0, 0, 0, .8);
        -0-box-shadow: -3px 5px 20px rgba(0, 0, 0, .8)
    }
    
    .box:before {
        position: absolute;
        top: 50%;
        right: 20px;
        bottom: 10px;
        left: 10px;
        z-index: -2;
        background: transparent;
        -moz-box-shadow: 3px 5px 20px rgba(0, 0, 0, .8);
        box-shadow: 3px 5px 20px rgba(0, 0, 0, .8);
        content: '';
        -webkit-transform: skew(0, -2deg);
        -webkti-box-shadow: 3px 5px 20px rgba(0, 0, 0, .8);
        -0-box-shadow: 3px 5px 20px rgba(0, 0, 0, .8)
    }
</style>

<body>
    <div class="wrap effect">
        <h1>曲线阴影</h1>
        <p>before,after 设置 border-radius:100px/10px,添加阴影，设置Z-index属性移到底部，调整位置</p>
    </div>
    <div class="wrap box">
        <h1>翘边阴影</h1>
        <p>分别对before,after进行skew，变平行四形，再行移至两个底角位置，背景background:transparent，添加阴影，调整位置。注释z-index便知原理</p>
    </div>
</body>

</html>

转自：http://www.gbtags.com/gb/share/4492.htm

tragedyxd

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 3，用伪元素制作不一样的阴影效果

曲线阴影，翘边阴影 * { margin: 0; padding: 0; list-style: none } .wrap { margin: 50px auto; width: 600px; height: 200px; background-co
复制链接

扫一扫

专栏目录