2

我正在构建一个新站点，该站点在各种页面元素（框、输入等）上都有阴影。整个站点需要在所有浏览器中都相同（回到 IE7）。

我的问题在于在新旧浏览器上的许多不同元素上实现这些阴影的最佳方法。

在此处输入图像描述

我知道没有图像的 css3 解决方案：box-shadow: 1px 1px #333- 但这不会很好地降级。

我真的不想为每个元素都使用图像，因为我们会查看每个元素 4 个图像，并且对服务器的请求和页面加载时间会变得很荒谬，只是为了一个简单的效果。

甚至可以创建一个后备说：如果浏览器不支持 box-shadow，使用图像？我看到的唯一问题是很多额外的标记，这会使管理变得更加困难。

我想这里的困难是要求“我想要它现代但要很好地退化”。
实施投影时，哪种解决方案最适合我（有替代方案）？

4

4 回答 4

4

您可以使用http://modernizr.com来检测当前用户是否使用支持 css3 的浏览器，但我认为您最好使用旧方法制作带有阴影的框。

您可以使用“滑动门”技术制作盒子的顶部和底部，并为盒子本身使用另一个背景图像。

不管怎样，你可以使用 CSS3 pie ( http://css3pie.com/ ) 但我通常不喜欢这个插件，因为它有时有点小错误，并且会提高浏览器性能所需的性能。

于 2012-11-20T14:48:29.970 回答
3

你可以尝试使用css

filter: progid:DXImageTransform.Microsoft.Shadow(...);

但这阴影很可怕。我认为最好的解决方案是仅在允许 box-shadow 的现代浏览器中显示阴影。

于 2012-11-20T14:40:37.373 回答
1

嘿，你可以用Javascript检查它

var supports = (function() {  
   var div = document.createElement('div'),  
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),  
      len = vendors.length;  
   return function(prop) {  
      if ( prop in div.style ) return true;  
      prop = prop.replace(/^[a-z]/, function(val) {  
         return val.toUpperCase();  
      });  
      while(len--) {  
         if ( vendors[len] + prop in div.style ) {  
            // browser supports box-shadow. Do what you need.  
            // Or use a bang (!) to test if the browser doesn't.  
            return true;  
         }  
      }  
      return false;  
   };  
})();  
if ( supports('textShadow') ) { 
   document.documentElement.className += ' textShadow';  
}

然后输入你想要使用图像的 else 语句，或者你可以使用一个名为 Modernizer http://www.modernizr.com/的库，这样旧的浏览器就知道他们必须如何实现 css3 标签

链接到代码的源代码：SOURCECODE

于 2012-11-20T14:36:42.063 回答
0

您可以对旧版本的 IE 使用以下内容：

/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

此处为 MSDN 详细信息，此处为示例

于 2012-11-20T14:37:14.203 回答