框上的跨浏览器阴影

Question

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

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

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

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

甚至可以创建一个后备说：如果浏览器不支持box-shadow，请使用图像？只有我看到的问题是许多额外的标记，这可能使管理更难。

我想这里的困难是要求“我希望它现代，但要好好降解” 在实施投影时，哪种解决方案最适合我（有替代方案）吗？

Answer 1

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

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

无论如何你可以使用CSS3 pie（http://css3pie.com/），但我通常不喜欢这个插件，因为它有时会出现一些小错误并提高所需的浏览器性能。

Answer 2

您可以尝试使用css

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

但是这个阴影太可怕了。我认为最好的解决方案是仅在现代浏览器中显示阴影，这允许使用盒子阴影。

Answer 3

嘿，你可以用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

Answer 4

您可以在旧版本的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 Details here和Example here