html - CSS box-shadow 在 IE 或 Safari 上不工作

标签 html css internet-explorer firefox safari

#keyboard {
position: fixed;
background: #eee;
display: none;
border: 1px solid #ccc;
border-radius:7px;
width: 950px;
height: 300px;
padding: 5px;
cursor: move;
background-image:url('BackgroundImage.jpg');
box-shadow: -5px -5px 5px 5px #888; 
-moz-border-radius: -5px -5px 5px 5px #888;
-webkit-border-radius: -5px -5px 5px 5px #888;

上面的css代码,在Firfox浏览器下是可以的。 但是我在IE8、IE6和safari下都不能显示阴影。

box-shadow: -5px -5px 5px 5px #888; 

请告诉我解决方案。

最佳答案

为了给 IE 用户提供类似 box-shadow 的效果,我通常使用专有的 MS 过滤器,以下是我的 css 的摘录:

-moz-box-shadow: 2px 4px 19px #333333;
-webkit-box-shadow: 2px 4px 19px #333333;
box-shadow: 2px 4px 19px #333333;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=115, Color='#333333')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=115, Color='#333333');

显然在 IE 上的效果是不同的,但是使用各种参数你可以非常接近(或者至少可以接受)你在每个浏览器上的期望

关于html - CSS box-shadow 在 IE 或 Safari 上不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7632331/

相关文章:

html - 水平图像滚动,里面的文字太过分了

css - Chrome (osx) 错误 : select tag css border 0

html - 在顶部和底部创建一个倾斜按钮

javascript - 如何将背景图像应用到某些HTML按钮,并使图像从上次停止的地方继续播放?

javascript - 如何使用 JavaScript 每秒向右移动 10 个像素并向下移动 10 个像素

javascript - IE 显示我的代码而不是我的网页,我该如何解决此问题?

javascript - 在 IE 上运行 React 应用程序时出现语法错误

internet-explorer - 在 IE 中播放 WAV 文件

html - 如何使更多的 div 彼此非换行,但整个列表换行?

javascript - 获取按钮点击的函数