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

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

来源：1-7 曲线阴影

PaintedLady

2016-04-13 13:48

<!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>

写回答关注

4回答

森林之歌

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 0
慕数据0204790

2016-11-25 21:43:22

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

2 3

weixin...

66666，找了半天，没颜色。我去

2019-10-20 12:35:28

共 2 条回复 >
PaintedLady

2016-04-15 17:12:17

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

1 3

Shane_...

这个好

2018-09-03 16:25:19

共 1 条回复 >

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;就有效果了。虽然不知道是为什么。

0 2

CSS3实现“图片阴影”效果

利用多投影重叠的原理，实现曲线阴影与翘边阴影的效果

34769 学习 · 62 问题

查看课程

相似问题

曲线阴影z-index不管用。。。

回答 3

为什么我按照老师的思路来做也定位了但是设置z-index显示不出效果怎么回事？

回答 3

Z-INDEX 没效果

回答 6

曲阴影中的主阴影为什么要相对定位？是为了z-index吗？

回答 1

z-index为什么不管用？

回答 4

打开慕课网App查看更多内容