我正在构建一个新站点，该站点在各种页面元素(框、输入等)上有阴影。整个网站需要在所有浏览器中保持一致(回到 IE7)。
我的问题在于如何在新旧浏览器的许多不同元素上实现这些投影的最佳方式。
我知道没有图像的 css3 解决方案:box-shadow: 1px 1px #333 - 但这不会很好地降级。
我真的不想为每个元素都使用图像，因为我们会查看每个元素 4 个图像，并且对服务器的请求和页面加载时间会为了一个简单的效果而变得荒谬。
是否有可能甚至创建一个回退说:如果浏览器不支持 box-shadow，请使用图像？我看到的唯一问题是有很多额外的标记，这会使它更难管理。
我想这里的难点在于“我想要它现代但又能很好地降级”的要求。
在实现投影时哪种解决方案最适合我(是否有替代方案)？
最佳答案
您可以使用 http://modernizr.com检测当前用户是否使用支持 css3 的浏览器，但我认为您最好使用旧方法制作带阴影的框。
您可以使用“滑动门”技术制作盒子的顶部和底部，并为盒子本身使用另一个背景图像。
无论如何，您可以使用 CSS3 pie ( http://css3pie.com/ )，但我通常不喜欢这个插件，因为它有时会出现一些问题，并且会提高所需的浏览器性能。
关于html - 框上的跨浏览器阴影，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13475373/