css box-shadow阴影不透明的解决办法-侯体宗的博客

css box-shadow阴影不透明的解决办法
前端 / 管理员发布于 8年前 357

如下面示例：

复制代码代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>AIDI</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">

阴影效果
</div>
</body>
</html>

解决办法：box-shadow中的颜色使用rgba方式，如：rgba(0, 0, 0, 0.4)，其中0.4用于设置透明度。如下面示例：

复制代码代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>AIDI</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">

阴影效果
</div>
</body>
</html>

上一条：
css a:hover下的span样式无效的解决方法
下一条：
CSS3 特效范例整理

0条评论 (评论内容有缓存机制,请悉知!)

最新最热

相关文章
使用 Alpine.js 排序插件对元素进行排序(0个评论)
在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
使用mock-server实现模拟接口对接流程步骤(0个评论)
vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)

近期文章
opencode + Oh-my-openagent,我的第一个免费的ai编程智能体管家:Sisyphus(0个评论)
Google AI Studio升级全栈 vibe coding体验，可直接构建带登录和数据库的应用(0个评论)
Apifox桌面端被曝遭供应链投毒：CDN 脚本被篡改，窃取 SSH 密钥与 Git 凭证(0个评论)
在go语言中实现字符串可逆性压缩及解压缩功能(0个评论)
使用go + gin + jwt + qrcode实现网站生成登录二维码在app中扫码登录功能(0个评论)
在windows10中升级go版本至1.24后LiteIDE的Ctrl+左击无法跳转问题解决方案(0个评论)
智能合约Solidity学习CryptoZombie第四课:僵尸作战系统(0个评论)
智能合约Solidity学习CryptoZombie第三课:组建僵尸军队(高级Solidity理论)(0个评论)
智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)

近期评论
test1 在
opencode + Oh-my-openagent,我的第一个免费的ai编程智能体管家:Sisyphus中评论 test..
122 在
学历：一种延缓就业设计，生活需求下的权衡之选中评论工作几年后，报名考研了，到现在还没认真学习备考，迷茫中。作为一名北漂互联网打工人..
Zita 在
Google AI Studio升级全栈 vibe coding体验，可直接构建带登录和数据库的应用中评论 111222..
123 在
Clash for Windows作者删库跑路了，github已404中评论按理说只要你在国内，所有的流量进出都在监控范围内，不管你怎么隐藏也没用，想搞你分..
原梓番博客在
在Laravel框架中使用模型Model分表最简单的方法中评论好久好久都没看友情链接申请了，今天刚看，已经添加。..

Top