文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > css教程 > 正文

css：box-shadow的透明度如何设置？

黄舟
发布： 2017-07-21 14:16:41
原创
7161人浏览过

今天发现使用box-shadow属性，可以很好的给p添加阴影效果，但是添加的效果如果是：

-moz-box-shadow:0 4px 4px #999; 
-webkit-box-shadow:0 4px 4px #999; 
box-shadow:0 4px 4px #999;
登录后复制

使用#设置的颜色是没有透明效果的。这样设置阴影的颜色，如果阴影落在的位置不是白色的，甚至是动态的，例如落在了幻灯片上，好几张不同颜色的图片轮播。那么这样设置阴影的颜色，会是阴影效果看起来很假！

解决办法：使用rgba来代替。

-moz-box-shadow:0 4px 4px rgba(0, 0, 0, 0.4); 
-webkit-box-shadow:0 4px 4px rgba(0, 0, 0, 0.4); 
box-shadow:0 4px 4px rgba(0, 0, 0, 0.4);
登录后复制

这里要交代一下：

ie6和ie7应该是不支持box-shadow属性的。

立即学习“前端免费学习笔记（深入）”；

可以使用：*filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#888888"); 来代替

由于我设置的阴影并不要求一定要在所有浏览器中显示。所以我没有添加这行代码，所以也没有验证在这里将Color="#888888"中的颜色用rgba来代替是否可行，有需要的朋友自己验证去，估计够呛！

我的原则：

只要不是布局错位等问题，我是不会做兼容性修改的。

为了少部分不升级浏览器的顽固派，没有必要增加一行冗余代码，既然用的旧版本浏览器，那看到的效果不够漂亮是肯定的。

之所以好多旧版本ie浏览器到现在还存在，都是前端惯的！

以上就是css：box-shadow的透明度如何设置？的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：如何利用CSS3实现曲线阴影以及翘边阴影的图文代码教程 下一篇：CSS3如何使用webkit-scrollbar属性自定义滚动条样式的实例
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
css中em和rem有什么区别 css单位em与rem的差异解析 em是基于父元素字体大小计算的相对单位，rem是基于根元素字体大小计算的相对单位。1.em在嵌套元素中容易产生级联效果，可能导致意外的字体大小。2.rem更为直观和可控，适合响应式设计和全局字体调整。3.em适用于需要相对父元素缩放的场景，如按钮设计。4.em累积效应可能导致字体大小迅速变化，可用rem或px重置。5.建议项目中统一使用一种单位，rem可与CSS预处理器结合使用。
2025-06-24 16:29:02
451
css中pt指什么 css中pt单位的含义解析 在CSS中，pt代表“点”，是一个起源于印刷行业的长度单位，相当于1/72英寸。pt单位在需要精确控制打印效果的场景下非常有用，但在不同DPI设备上的显示可能不一致，适合结合px使用。
2025-06-24 15:55:02
610
CSS中backface-visibility属性hidden和visible的作用 backface-visibility属性用于控制元素在3D变换中的背面是否可见，取值为visible或hidden。1.visible使背面始终可见，适用于两面显示内容或过渡动画；2.hidden则隐藏背面，常用于翻转卡片等真实视觉效果；3.使用时需注意：仅在支持3D变换时生效，通常配合transform-style:preserve-3d，需关注移动端兼容性，且要注意z-index层级设置避免内容消失。理解其作用需结合具体变换环境和上下文结构。
2025-06-24 15:41:06
268
CSS如何制作骨架屏？CSS加载占位动画技巧 骨架屏是通过CSS实现的加载过渡效果，核心在于使用HTML结构与CSS动画模拟内容轮廓并提升用户体验。具体步骤包括：1.使用HTML搭建无内容的页面结构；2.通过CSS设置浅灰色背景与动画实现动态闪烁效果；3.利用border-radius或clip-path控制骨架屏形状；4.数据加载完成后通过JavaScript移除骨架屏；5.优化性能时避免复杂形状、使用CSS动画并减少重绘重排；6.可根据网络环境动态调整骨架屏复杂程度；7.骨架屏区别于loading动画，其优势在于提供内容预期而非单纯提示
2025-06-24 15:04:02
253
css中的var是什么意思 css中var变量的功能解析 在CSS中，var函数允许使用自定义属性值，使样式表更灵活和易于维护。使用var的好处包括：1.集中管理样式值，修改一个变量即可更新所有使用该变量的地方；2.可以设置备用值，确保即使变量不存在也能应用默认值；3.变量可嵌套使用，提高灵活性；4.适用于主题颜色和间距管理，方便切换主题风格。
2025-06-24 14:25:01
445
css如何调整元素层级？css层级属性使用指南 z-index属性用于控制元素的堆叠顺序，数值越大越靠前。要使用z-index，必须为元素设置非static的position值（如relative、absolute、fixed或sticky），否则该属性无效。堆叠上下文会影响z-index的表现，某些CSS属性（如transform、opacity、filter等）会创建新的堆叠上下文，导致子元素的z-index仅在该上下文中生效。常见问题包括：1.忘记设置position导致z-index无效；2.父元素堆叠上下文限制子元素层级；3.z-i
2025-06-24 14:09:02
341
css中100vh是什么 css中100vh单位的含义解释 100vh在CSS中代表视口高度的100%，常用于创建全屏布局和确保元素高度与视口一致。100vh适应浏览器窗口大小变化，适用于响应式设计，但需注意移动设备上的视口计算问题。
2025-06-24 14:04:02
943
css如何实现响应式布局？css响应式设计教程 响应式布局的核心是通过媒体查询、Flexbox、Grid等技术组合，使网页自动适配不同设备。1.媒体查询根据屏幕特性应用不同CSS规则；2.Flexbox用于一维布局，Grid用于二维布局，二者结合实现灵活结构；3.响应式图片可通过srcset、picture元素或CSS背景图实现；4.排版使用相对单位、viewport单位和clamp函数优化阅读体验；5.测试需借助浏览器工具、在线工具及真实设备；6.最佳实践包括移动优先、内容优先、保持简洁和使用框架；7.常见问题如图片变形、文本溢出等可通过相
2025-06-24 13:46:01
237
margin在css中什么意思 css中margin属性的含义详解 在CSS中，margin属性用于控制元素与其周围元素之间的空白区域。1.margin定义了元素边框外围的空间，影响布局和间距。2.可以设置上、右、下、左四个方向的外边距，使用长度值、百分比或auto。3.负值可使元素向相反方向移动，但需谨慎使用。4.外边距折叠是指相邻元素的外边距合并，而不是累加。5.建议减少margin使用，优先使用padding和现代布局方法，简化值以优化性能。
2025-06-24 13:26:01
418
css中span什么意思 css中span标签的定义解析 span在CSS中用于包装文本或内联元素，以便应用样式或脚本操作。1.它是内联元素，不携带视觉意义，但可通过CSS赋予样式。2.常用于精细排版控制，如改变文本颜色、字体、背景。3.可嵌套在其他元素中，但需避免滥用。4.可与CSS伪类结合，创造动态效果。5.注意其默认不换行，可通过display属性调整。6.过度使用可能影响SEO和性能，需谨慎使用并优化。
2025-06-24 12:52:02
412
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部