关于css3的阴影遮盖问题的小研究

feng409 发布于2019-08-30 13:06 / 2350人阅读

摘要：今日在写一个阴影效果的时候遇到了一个小问题不多说上代码可以看到下方的阴影总被遮挡但如果我想要这种效果应该怎么实现呢刚开始我想到的是是不是改一下的值就可以正常显示了呢我们试试将第二个的设为结果这样果然毫无效果于是我尝试使用在第二

今日在写一个阴影效果的时候遇到了一个小问题,不多说,上代码

div {
            width: 100px;
            height: 100px;
            background: #e3e3e3;
            border: 1px solid #333;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
        }

可以看到,下方的阴影总被遮挡,但如果我想要

这种效果应该怎么实现呢
刚开始我想到的是z-index,是不是改一下z-index的值就可以正常显示了呢,我们试试,将第二个div的z-index设为999

div {
            width: 100px;
            height: 100px;
            background: #e3e3e3;
            border: 1px solid #333;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
        }
div:nth-child(2) {
            z-index:999;
        }

结果这样:

果然毫无效果,于是我尝试使用在第二div后面加一个::after,给他加一个阴影,并且把原阴影去除,以便观察

div {
            width: 100px;
            height: 100px;
            background: #e3e3e3;
            border: 1px solid #333;
        }
div:nth-child(2)::after {
            display: block;
            content: "";
            width:100px;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
            height: 20px;
        }

结果如下

虽然阴影显示出来了,但是还是被第三个div遮盖,那如果把它绝对定位,抽离文本流试试呢

 div {
            width: 100px;
            height: 100px;
            background: #e3e3e3;
            border: 1px solid #333;
        }
div:nth-child(2)::after {
            position: absolute;
            display: block;
            content: "";
            width:100px;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
            height: 10px;
        }

确实有效果了,但是::after如果不设置高好像就无法显示,但是思路来了,是不是因为position的原因呢,于是我马上把所有的div都设置成relative,并且把第二个设置为z-index:999,看效果

 div {
            position: relative;
            width: 100px;
            height: 100px;
            background: #e3e3e3;
            border: 1px solid #333;
        }

div:nth-child(2) {
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

刷新,哈,好了
那是不是当position为absolute的时候也一样有效呢,试试

 div {
            position: absolute;
            width: 100px;
            height: 100px;
            background: #e3e3e3;
            border: 1px solid #333;
        }

div:nth-child(2) {
            top: 200px;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

div:nth-child(3) {
            top: 300px;
        }

一样可以

所以阴影的遮盖顺序是当元素的 position 为 relative 或者 absolute 时, z-index 大的遮盖 z-index 小的

第一次写文章,不专业的地方,轻喷~轻喷~~

云服务器 GPU云服务器关于云计算的小故事关于网络安全的小知识有关于c语言的小程序关于javascript的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115312.html

关于css3的阴影遮盖问题的小研究

摘要：今日在写一个阴影效果的时候遇到了一个小问题不多说上代码可以看到下方的阴影总被遮挡但如果我想要这种效果应该怎么实现呢刚开始我想到的是是不是改一下的值就可以正常显示了呢我们试试将第二个的设为结果这样果然毫无效果于是我尝试使用在第二今日在写一个阴影效果的时候遇到了一个小问题,不多说,上代码 div { width: 100px; height...

supernavy 2019-08-01 15:21 评论0 收藏0
the compatibility problem of ie

摘要：下的兼容问题处理背景透明，圆角，和支持部分选择器例如支持的语义化标签，媒体查询等。在页面头部优先加载需要的插件，因为部分插件需要依赖所以需要最先加载。注意顺序，插件优先添加。这个路径是相对的路径。 ie8hack ie8下的兼容问题处理：背景透明，css3圆角，css3和jquery支持部分css3选择器（例如：nth-child）,支持html5的语义化标签，媒体查询@media等。...

DobbyKim 2019-08-30 13:00 评论0 收藏0
the compatibility problem of ie

摘要：下的兼容问题处理背景透明，圆角，和支持部分选择器例如支持的语义化标签，媒体查询等。在页面头部优先加载需要的插件，因为部分插件需要依赖所以需要最先加载。注意顺序，插件优先添加。这个路径是相对的路径。 ie8hack ie8下的兼容问题处理：背景透明，css3圆角，css3和jquery支持部分css3选择器（例如：nth-child）,支持html5的语义化标签，媒体查询@media等。...

GeekQiaQia 2019-08-01 15:12 评论0 收藏0
页面动画知识点整理

摘要：然后在节点上设置了动画属性，并将其设为前面定义的动画，每一次动画秒，表示无限循环，表示缓动方式，两个关键帧之间的变化是方式逐步变化的。平时工作中会遇到需要实现一些存在动画的页面。这里对动画的实现知识做一个整理。页面动画的实现可以分为两类：CSS动画、Canvas动画、JavaScript动画。JavaScript动画没啥好讲的，这里就不整理了。 CSS动画 CSS3中提供了一个属性t...

booster 2019-08-19 18:30 评论0 收藏0
利用CSS改变图片颜色的100种方法！

摘要：前言说到对图片进行处理，我们经常会想到这类的图像处理工具。或者是的时候，对图片的对比度，阴影进行处理。过滤器通常被用于调整图片，背景和边界的渲染。最后，安利我们的公众号前端指南。前言说到对图片进行处理，我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者，我们经常会需要处理一些特效，例如根据不同的状态，让图标显示不同的颜色。或者是hover的时候，对图片的对比度，阴影...

Keven 2019-08-02 16:06 评论0 收藏0