                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /CSS3实现“图片阴影”效果

为什么设置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

源自：CSS3实现“图片阴影”效果 1-7

关注问题我要回答

2909

操作

收起

4 回答

森林之歌
2019-10-10

<!DOCTYPE html>

<html>

<head>

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

<h1>shadow effect</h1>

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

</div>

</body>

</html>

0 回复有任何疑惑可以回复我~

收起回答

慕数据0204790
2016-11-25

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

3 回复有任何疑惑可以回复我~

收起回答

qq_陪伴你的34_0

感谢哈哈困扰好久感觉自己像是个傻子QVQ

2018-03-25 回复有任何疑惑可以回复我~

weixin_慕慕4535464

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

2019-10-20 回复有任何疑惑可以回复我~

PaintedLady 提问者
2016-04-15

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

3 回复有任何疑惑可以回复我~

收起回答

Shane_Leo

这个好

2018-09-03 回复有任何疑惑可以回复我~

PaintedLady 提问者
2016-04-13

.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 回复有任何疑惑可以回复我~

收起回答