更轻松的跨浏览器CSS3功能

Question

要向HTML元素添加box-shadow，我目前必须这样做：

box-shadow: 2px 2px 3px #969696;
-moz-box-shadow: 2px 2px 3px #969696;
-webkit-box-shadow: 2px 2px 3px #969696; filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);

在这一点上，在我看来，这个简单梯度的代码量在网络的这个阶段是荒谬的。更不用说维护时间 - 如果我想更改颜色，我必须为每个供应商前缀更改四次。 （这也适用于像CSS3 Gradients这样的东西。）

什么是更好，更优化的处理方式？我知道有很多非标准的修补程序，比如CSS3 Pie，但根据我的经验，它们需要永远加载，我仍然需要为Firefox编写代码。 Webkit的。我是否需要使用服务器端代码来执行此操作？我真的很沮丧地使用冗余的笨拙代码。

Answer 1

您可以使用以下任何一种方法来缓解您的悲伤：

动态样式表语言/ CSS扩展程序

• LESS
• Sass
• Compass (Sass Framework)

CSS 3生成器

• Prefixr
• CSS 3 Please
• CSS 3 Generator
• Mother Effing HSL
• Mother Effing Text Shadow
• CSS 3 Maker
• CSS Gradient Generator
• CSS Filter Effects

Answer 2

cssSandpaper正是您要找的。

Answer 3

在这里使用Less CSS框架和bootstrap的预引导http://markdotto.com/bootstrap/