css3关于box-shadow看不到效果的问题

最新推荐文章于 2024-07-26 08:45:03 发布
置顶 最新推荐文章于 2024-07-26 08:45:03 发布
阅读量8.3k 收藏 2
点赞数 6
分类专栏： 个人项目 css 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/agua001/article/details/108057097
版权

两个盒子贴一起，如果单纯设置

box-shadow:0px 8px 25px 1px rgba(44,16,111,0.06);

不一定看到效果的，尝试在需要给阴影的盒子加z-index属性

z-index: 2020;

神奇的出来了。

酒能醉人，亦能醒人。

心若向阳(*￣︶￣)
关注
专栏目录
box-shadow 设置后看不到的问题
XXHolic
04-12 3948
引子 在修复问题的时候，发现一个元素设置了 box-shadow 属性，其它的元素也有公用，但这个元素的阴影看不见，试着把颜色值变的更明显，但还是看不到。问题示例，示例二维码。 Origin My GitHub 问题原因 首先想到是不是属性写错了，但其它的元素都正常显示，这个是公用的样式。那么是不是有样式覆盖呢？在浏览器中仔细看了下，样式是有覆盖，但没有覆盖 box-shadow 属性。于是就仔细的跟正常显示的元素进行对比，发现有一点不同：一个元素的父元素可以滚动，另外一个元素的父元素不可以滚动。于是
CSS3里box-shadow属性的使用方法-web前端教程
web前端入门基础进阶教程-htmlcssjs
07-03 1160
CSS里面的属性很多，有些属性长时间不用，就容易忘，尤其是那种需要设置多个值的属性。比如：box-shadow，每次使用CSS3里的box-shadow,都记不清box-shadow怎么使用，都要查阅资料才能实现对应的效果,现在总结一下,box-shadow的使用方法以及box-shadow内阴影的使用，方便以后查看。 一、box-shadow语法 box-shadow: none | inset（可选值，不设置，为外投影，设置，为内投影） x-offset（阴影水平偏移量，正方向为right） y-off
box-shadow失效原因和实现四周阴影效果
Lon_wang的博客
08-15 4843
页面布局中，阴影盒子紧贴一起导致box-shadow不生效，不起作用的解决办法。以及使用个box-shadow实现四周阴影效果
css -- box-shadow阴影属性的复合写法及高级用法，超详细！
最新发布
共同学习，共同成长
07-26 5401
大家好，我是码喽的自我修养！今天给大家分享css3中的box-shadow属性的复合写法及高级用法！并提供具体代码帮助大家深入理解，彻底掌握！
为什么css的box-shadow和border-radius没效果解决方法
qq_30908729的博客
12-15 9673
问题描述： box-shadow和border-radius是CSS3中的属性，有的浏览器内核无法识别，这就是设置的效果无法生效的原因，使用它们给标签增加圆角和阴影效果的时候，就得考虑到各个浏览器的兼容问题。一般来说，我们开发的时候，页面样式只考虑三种内核的渲染效果即可，IE内核，Webkit和Gecko(Firefox内核)。 解决方法：http://www.yayiho
CSS3 - 圆角边框、盒子阴影
贝勒里恩的博客
08-17 429
圆角边框 在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。 border-radius属性设置元素的外边框圆角 border-radius: length; 参数值可以为数值或百分比的形式 如果是正方形，想要设置一个圆，把数值修改为高度或者宽大的一半即可，或者直接写为50% 如果是矩形，设置为高度的一半就可以做侧边半圆弧矩形 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角 参数值个数 意思 border-radius: 10px
node后台截图 box-shadow无效-解决
月迷津渡丶的专栏
09-12 581
最近有这样的需求,出现一个bug,截图的时候,box-shadow无效 但不是不支持box-shadow 检查一下box-shadow的单位,是不是vw,如果是vw,试试改成其他,如px 应该就能解决了  ...
box-shadow无效果
m0_54934841的博客
06-21 3067
给盒子加上box-shadow不出现效果 box-shadow: 0px 2px 9px 0px rgb(129 128 128 / 50%); 添加z-index即可显示效果 z-index: 898;
CSS3中box-shadow的用法介绍
12-13
在CSS3中，`box-shadow`属性是一个强大的工具，用于为元素添加阴影效果，无论是外阴影（外侧的模糊效果）还是内阴影（内侧的填充效果），都可以通过它实现。下面我们将深入探讨这个属性的各个组成部分以及如何利用...
css box-shadow阴影不透明的解决办法
09-25
然而，在实际使用box-shadow时，我们可能会遇到一些问题，比如阴影并不是完全透明的效果，而是显示出一定的不透明度。这个问题可能会导致阴影区域的背景色彩与预期效果出现偏差。 首先，我们需要了解box-shadow属性...
box-shadow 黄色感叹号无效
lx233
05-19 1186
是因为用了圆角！！！ 一般冲突不会感叹号，除非是你写错了 看看有什么不同： box-shadow: 0 2px 12px 0 rgba(0,0,0,0.10); // ok // box-shadow: 0 2px 12px 0 rgba(0 0 0 ,0.10); // not ok
22/10/13 vue中box-shadow不生效
Nighsloth的博客
10-13 2185
vue中box-shadow不能写成rgb(0 0 0 / 20%)
设置box-shadow无效的解决方案
热门推荐
m0_46365130的博客
05-06 1万+
给tab选项卡添加了box-shadow没有产生效果 .wuc-tab { padding-left: 12rpx; box-shadow: 0 8rpx 8rpx 0 rgba(0, 0, 0, 0.21) !important; } 找了半天帮下方代码注释掉发现效果出来了，一步一步排查是因为下发设置的padding-top影响到了；注释掉就可以了。 .shop-cell { // padding-top: 10rpx; padding-bottom: 62rpx; backgr
tr标签使用hover的box-shadow效果不生效
weixin_34281537的博客
01-15 1388
先说问题： 　　这是大致的HTML结构 <table cellpadding="0" cellspacing="0"> <thead> <tr> <th>Phone number</th> <th>Date</th> <th>Name&l...
[css] box-shadow层级问题-相邻元素背景遮盖了阴影
qq_14993591的博客
07-21 778
当box-background元素没有给背景颜色时，box-shadow的阴影可以正常显示当box-background元素给定一个背景色之后，box-shadow的阴影就没有了。
前端CSS3阴影盒子踩坑
m0_49223543的博客
08-13 436
前端CSS3阴影盒子踩坑
css左右阴影 上下没有,css - css3在另一个div下的阴影，z-index不起作用
weixin_36299790的博客
08-04 913
我正在尝试使用投影使其看起来像一个div(标题)在另一个“上方”。 我的问题是“中间”div正在覆盖阴影。 我尝试使用z-index将标题div放在中间div上，但它不起作用(阴影仍然被覆盖)。 当我在div之间休息时，我可以看到阴影，因此我知道代码的一部分工作正常。 我有以下HTML代码：这个css：#portal_header_light {font-family:Arial, Helveti...
html盒子阴影只设置左右,只在容器一边或两边显示盒子阴影
05-14
可以使用CSS中的box-shadow属性来实现盒子阴影的设置，如果只想在容器的一边或两边显示盒子阴影，可以使用伪元素来实现。 例如，如果想在容器左侧显示盒子阴影，可以使用如下的CSS代码： ```css .container { position: relative; overflow: hidden; } .container::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 10px; /* 设置阴影宽度 */ background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* 设置渐变背景 */ z-index: 1; } .container::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 10px; /* 设置阴影宽度 */ background: linear-gradient(to left, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* 设置渐变背景 */ z-index: 1; } .container div { box-shadow: 0 0 10px rgba(0,0,0,0.5); /* 设置盒子阴影 */ z-index: 2; } ``` 解释一下上述代码： - 首先，容器需要设置为相对定位（position: relative），并且设置一个溢出隐藏（overflow: hidden）的属性，以便隐藏伪元素的部分内容。 - 然后，使用::before和::after伪元素来分别在容器的左侧和右侧添加渐变背景，以实现阴影效果。这里使用了linear-gradient()函数来设置渐变背景，其中第一个参数是渐变方向，to right表示水平方向从左到右，to left表示水平方向从右到左；第二个参数是起始颜色，第三个参数是结束颜色，这里使用rgba()函数来设置颜色和透明度。 - 最后，在容器内部添加一个div元素，并设置box-shadow属性来为其添加盒子阴影效果。为了让阴影显示在伪元素的下面，需要给div元素设置一个比伪元素更高的z-index值。 如果想在容器的两侧都显示盒子阴影，可以将::before和::after伪元素的left和right属性都设置为0，然后将宽度分别设置为容器宽度的一半即可。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值