IE 中的框阴影与镶边中的框阴影不同

box shadow different in IE than in chrome

本文关键字：阴影 IE      更新时间：2023-09-26

每个人都知道盒子阴影在IE中的渲染效果与在chrome或Firefox中完全不同（这对我来说令人难以置信）。 我的问题是你如何处理这种情况？ 因为在某些情况下设计可以完全改变......大多数时候，IE上的框阴影比Chrome/Firefox上的框阴影薄一点。他们是否有任何可以在IE上自动增加一点框阴影的java脚本插件？

我认为你应该记住这一点：http://dowebsitesneedtolookexactlythesameineverybrowser.com/

澄清一下：您可能需要重新考虑阴影在每个浏览器中的宽度完全相同是否真的那么重要。它可能不会提供那种不同的感觉，而像说明所需宽度以外的宽度之类的小技巧，因为它似乎是您想要的，在特定操作系统上的特定硬件上的特定浏览器中可能会在您无法测试的设置中产生不良影响。

.shadow {
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

那就是：

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
阴影的水平偏移量

（必需），正表示阴影将位于框的右侧，负偏移量将阴影放在框的左侧。

阴影

的垂直偏移量（必需），负数表示框阴影将位于框上方，正数表示阴影将位于框下方。

模糊半径（必需），如果设置为 0，阴影将很清晰，数字越大，它就越模糊，阴影将延伸得越远。例如，水平偏移为 5px 且模糊半径为 5px 的阴影将是总阴影的 10px。

扩散半径（可选），正值增加阴影的大小，负值减小大小。默认值为 0（阴影与模糊大小相同）。

颜色（必需） - 采用任何颜色值，如十六进制、命名、RGBA 或 HSLA。如果省略颜色值，则以前景色（文本颜色）绘制框阴影。但请注意，较旧的 WebKit 浏览器（Chrome 20 和 Safari 6 之前）在省略颜色时会忽略该规则。

使用像 rgba（0， 0， 0， 0.4） 这样的半透明颜色是最常见的，也是一个很好的效果，因为它不会完全/不透明地覆盖它结束的内容，但允许下面的内容通过一点点显示出来，就像一个真正的阴影。

Internet Explorer（8 及以下）Box Shadow

你需要一个额外的元素，但它可以用过滤器来实现。

<div class="shadow1">
  <div class="content">
    Box-shadowed element
  </div>
</div>
.shadow1 {
  margin: 40px;
  background-color: rgb(68,68,68); /* Needed for IEs */
  -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
  -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
  zoom: 1;
}
.shadow1 .content {
  position: relative; /* This protects the inner element from being blurred */
  padding: 100px;
  background-color: #DDD;
}

来源 ： CSS-tricks

您可以尝试CSS3PIE框阴影在IE中工作。

相关文章：