使用CSS3添加更多闪闪发光

您是否注意到，EA游戏发行新游戏时，他们经常同时为从PS3到Nintendo DS的每个游戏平台发行游戏？

这些设备的功能存在巨大差异，但它们会根据不同的游戏进行调整。 他们在维持游戏核心体验，主题和品牌的同时改变了视觉设计和游戏玩法。 他们专注于为每个客户提供所选游戏设备的最佳体验。

我可以将其与CSS开发联系起来。 除了有关IE6支持的问题外，我们似乎处于一种奇妙的境地，我们拥有功能强大的浏览器集合，所有浏览器均具有相当程度的CSS2.1支持：Safari，Firefox，Opera，Chrome和Internet Explorer。 实际上，这是我第一次记得有5种浏览器可用，它们都具有成熟且兼容的CSS支持级别。

在过去的几年中，最佳实践CSS的开发已从正常退化过渡到逐步增强。 在现代浏览器的进步和旧版本浏览器的消亡的鼓舞下，人们对现在可能发生的事情的兴趣日益增加。 越来越多的设计师正在考虑如何在不冒险兼容的情况下为每种浏览器提供最佳的用户体验。

这是我最近遇到的一些示例：

通过媒体查询，可以根据显示网页的设备的功能来精确控制CSS规则的应用方式。 可以查询设备的宽度，颜色，分辨率等。 Reinhold Weber演示了如何结合使用媒体查询和CSS3列，从而为Firefox，Safari和Chrome用户提供最佳体验。 该技术根据屏幕宽度增加文本列的数量。

乔纳森·斯努克（Jonathan Snook）在Safari，Chrome和最新版的Firefox中使用CSS3转换扩展演示了文本旋转技巧。 作为奖励，他还演示了通过使用专有的Microsoft filterproperty，您还可以支持Internet Explorer。

蒂姆·布朗（Tim Brown）在Safari中获得了纯CSS文本渐变效果，而马库斯·斯唐格（Markus Stange）在他的文章“ 与盒子阴影一起玩乐”中对盒子阴影感到有些乐趣。 Markus在Firefox 3.5中为按钮产生了一些令人印象深刻的效果，并且在Safari和Chrome中还对框阴影提供了一些支持。

我在Adobe AIR应用程序中使用了-webkit-box-sizing属性，以强制元素采用100％的宽度，同时排除其边框和内边距的宽度。 通常，边框和填充会将元素的宽度扩展到大于100％-这是经常遇到的麻烦。 现在， James Hopkins解释说，box-sizing属性已广泛支持浏览器。

Chrome一直支持CSS文本阴影 （Safari（自1.1版开始）提供了更长的支持），而最新版本的Firefox和Opera现在支持CSS文本阴影 。 Westciv有一个出色的CSS文本阴影生成工具 ，您可以使用它。 您还可以使用Safari和Chrome当前支持的CSS渐变生成工具 ，获得一些乐趣。

列表继续： 圆角 ， 自定义字体和RGBA颜色 。 这肯定令人兴奋！

但是，尽管令人兴奋，但仍必须具有成本效益才能值得付出努力。 因此，我想听听是否有人在日常工作中以任何方式使用渐进式CSS增强功能？ 如果您在客户工作中这样做，您如何将创意出售给客户？ 如果客户可以在一个浏览器中看到演示的增强功能，他们是否在所有浏览器中都要求它？ 如果您有任何现场示例，请告诉我们您的做法。

From: https://www.sitepoint.com/add-more-sparkle-with-css3/