css box-shadow阴影不透明的解决办法
发布时间：2018-10-06 04:32:58 所属栏目：经验 来源：站长网
导读：你在使用box-shadow来实现阴影效果的时候，有没有注意到有些情况下，阴影并不是透明的效果 Copy to Clipboard 引用的内容：[www.veryhuo.com]!DOCTYPE HTML html head meta http-equiv=Content-Type content=text/html; charset=gb2312 title烈火学院/titl
|
你在使用box-shadow来实现阴影效果的时候，有没有注意到有些情况下，阴影并不是透明的效果 Copy to Clipboard 引用的内容：[www.veryhuo.com]
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>烈火学院</title> <style> .shadow{ width:120px; height:120px; border:1px solid #ccc; background:#fff; font-size:12px; padding:10px; -moz-box-shadow:0 4px 4px #999; -webkit-box-shadow:0 4px 4px #999; box-shadow:0 4px 4px #999; *filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#333333"); } </style> </head> <body> <div style="width:200px;height:200px;background:#393"></div> <div class="shadow" style="position:absolute;left:80px;top:50px"> www.liehuo.net 阴影效果 </div> </body> </html> 解决办法：box-shadow中的颜色使用rgba方式，如：rgba(0, 0, 0, 0.4)，其中0.4用于设置透明度。如下面示例： Copy to Clipboard引用的内容：[www.veryhuo.com]
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>烈火学院</title> <style> .shadow{ width:120px; height:120px; border:1px solid #ccc; background:#fff; font-size:12px; padding:10px; -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); *filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#333333"); } </style> </head> <body> <div style="width:200px;height:200px;background:#393"></div> <div class="shadow" style="position:absolute;left:80px;top:50px"> www.liehuo.net 阴影效果 </div> </body> </html> （编辑：晋中站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
