问答详情
源自：1-7 曲线阴影

为什么设置z-index无效？曲边还是在.effect上方显示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>::before和::after</title>
    <style>
        .effect{
            position: relative;
            width: 50%;
            height: 30%;
            padding: 10%;
            margin: 0 auto;
            box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
            z-index: 0;
            text-align: center;
        }
        .effect:after,.effect:before{
            position: absolute;
            content:"";
            top:50%;
            bottom: -1px;
            left:30px;
            right: 30px;
            box-shadow: 0 0 20px rgba(0,0,0,0.8);
            border-radius: 40%/20%;
            z-index: -2;
        }
    </style>
</head>
<body>
    <div>
        <h1>shadow effect</h1>
        ::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。
    </div>
</body>
</html>


提问者：PaintedLady 2016-04-13 13:48

个回答

  • 森林之歌
    2019-10-10 10:15:55

    <!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title>::before和::after</title>

        <style>

            .effect{

                position: relative;

                width: 50%;

                height: 30%;

                padding: 10%;

                margin: 0 auto;

                box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;

                text-align: center;

                background: #fff; /* 必须设置背景; 但不能有z-index */

            }

            .effect:after,.effect:before{

                position: absolute;

                content:"";

                top:50%;

                bottom: -1px;

                left:30px;

                right: 30px;

                box-shadow: 0 0 20px rgba(0,0,0,0.8);

                border-radius: 40%/20%;

                z-index: -2;

            }

        </style>

    </head>

    <body>

        <div class="effect">

            <h1>shadow effect</h1>

            ::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。

        </div>

    </body>

    </html>


    0
  • 慕数据0204790
    2016-11-25 21:43:22

    因为你没有给盒子设置背景颜色，相当于与背景透明，这样就会看到它后面的盒子。你可以在effect中设置背景颜色，在.effect:after,.effect:before{}中设置背景颜色

    3
  • PaintedLady
    2016-04-15 17:12:17

    父级设置了relative，子元素设置了absolute，且均设置了z-index属性值的时候，父级对子元素的层级有限制（即不论子元素z-index值大小，层级不“正常”显示）。如果将父级的层级设置为：z-index：auto，或者父级不设置z-index属性，则子元素的z-index不受父级限制，即正常显示。

    3
  • PaintedLady
    2016-04-13 21:19:12

    .effect{
            position: relative;
            /*z-index: 0;*/
            box-shadow: 0 1px 4px rgba(0,0,0,.3),0 0 50px rgba(0,0,0,.1) inset;
        }

    注释掉z-index:0;就有效果了。虽然不知道是为什么。

    2