Html 框上的交叉浏览器阴影

我正在建立一个新的网站，它在各种页面元素（框、输入等）上有阴影。整个站点需要在所有浏览器中保持一致（回到IE7）

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

我知道css3解决方案没有图像：

box shadow:1px 1px#333

——但这不会很好地降低性能

我真的不想对每个元素都使用图像，因为我们会在每个元素中看到4个图像，对服务器的请求和页面加载时间会变得可笑，只是为了一个简单的效果

甚至可以创建一个后备方案吗？比如：如果浏览器不支持框阴影，使用图像？我所看到的唯一问题是大量的额外加价，这会使管理变得更加困难

我想这里的困难在于要求“我希望它现代化，但要很好地降级”。

---

在实现投影时，什么样的解决方案最适合我（有替代方案吗）？嘿，你可以用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的库，以便旧浏览器知道如何实现css3标记

---

链接到源代码：

对于旧版本的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');

您可以尝试使用css

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

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

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

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

---

无论如何，你可以使用CSS3 pie（），但我通常不喜欢这个插件，因为它有时有点问题，需要提高浏览器性能。

我同意，我想说“对于任何旧浏览器，不要担心掉影”。不幸的是，我需要一些弹药来解释原因，并理解我所有的选择，而不是说“仅仅因为”。不幸的是，我是一名开发人员，要求来自一个客户，我不能简单地向他们发送该链接（正如我所希望的那样）。关于这个链接，我期望他们的回答是“为什么？幸运的是，作为一名开发人员，你拥有客户想要的知识和专业技能（并且大概是付费的）。这包括这样的能力：“旧浏览器不会呈现像投影这样奇特的酷效果。”。如果我们不使用他们糟糕的实现，它会看起来更好。“是的，我同意。我只是不太了解盒子阴影的替代解决方案，除了老派的东西。我想说的是，其他的实现是可怕的，因为他们知道，而不是仅仅假设。我以前已经简单地看过了。如果我担心更多的跨浏览器问题而不仅仅是框阴影，那么这绝对是一个解决方案。你发布的代码也很有用，但是你会推荐什么替代方案呢？你可以使用图像，也可以像这样使用ManseUk的代码

。shadow{moz-box shadow:3px 3px 4px#000；-webkit box shadow:3px 3px 4px#000；box shadow:3px 3px 3px 4px 4px#000；/*用于IE 8*/-ms过滤器：“progid:DXImageTransform.Microsoft.shadow（强度=4，方向=135，颜色='#000000'）”/*适用于IE 5.5-7*/filter:progid:DXImageTransform.Microsoft.Shadow（强度=4，方向=135，颜色='#000000'）；

css3pie看起来不错，我没有意识到有一个

.htc

文件用于此。它是否“提高了所需的浏览器性能。”对于所有浏览器或IE？我阅读了它们的文档：

异步加载.htc文件。

和

当页面仍在加载时，.htc行为会自动应用。

。这听起来不错，但你知道这是否有明显的区别吗？