带有jQuery官方插件的文本和框阴影、圆角和渐变答案

【问题标题】：Text and box drop shadow, rounded corners and gradients with jQuery official plugin带有jQuery官方插件的文本和框阴影、圆角和渐变
【发布时间】：2010-10-02 22:07:53
【问题描述】：

是否有任何官方 jQuery 插件（如 jQuery UI）允许在所有浏览器中使用这些效果？或者至少是 IE8、Chome、FF 和 Opera。我不想要用户插件，因为从长远来看，这些插件通常缺乏支持、彼此不兼容或缺乏一致的质量和优化。

我在 jQuery UI 演示页面中看到了一些“覆盖和阴影类”，但我找不到任何关于它们的文档。我认为那些经常需要的功能必须以某种方式包含在 jQuery 中？

我会感谢任何帮助！提前致谢！

【问题讨论】：

我真的很怀疑，因为 IE8 不支持 CSS3 阴影...
嗯，这就是重点，IE8 不支持阴影。也没有我提到的任何其他影响。但是它们可以以不同的方式被模仿。包括 jQuery。

标签： jquery jquery-ui gradient rounded-corners shadow

【解决方案1】：

没有“官方”的方式来做到这一点，但有一种实用的方式（与 jQuery 无关）。对于某些网站，我已经完全在 CSS 中处理了这个问题，使用“真正”规则、浏览器特定版本以及CSS3 PIE htc 文件（用于 IE）的组合。一个例子：

div.roundbox {
  border-radius: 8px;          // Official. Maybe someday.
  -webkit-border-radius: 8px;  // Webkit browsers
  -moz-border-radius: 8px;     // Firefox
  behavior: url(PIE.htc);      // IE
}

CSS3 PIE 工作得非常好，而且似乎比 IE7.js 系列解决方案表现得更好。基本上，您将相同的behavior 行放入任何使用边框半径、框阴影等的 CSS 规则中。脚本负责其余部分，并且对将通过一个渲染效果的非 IE 浏览器没有影响前三个指令中的一个。

您还可以汇总所有值得 PIE 的对象的列表并一次性声明其行为（在常规规则之后）：

div.shadowbox, div.roundbox, p.somethingelse { behavior: url(PIE.htc); }

对于这种方法的智慧肯定有很多争论的空间——但它在很多情况下都非常有效。

【讨论】：

PIE.htc 本质上是另一个外部 javascript 库，并且处于测试阶段。我的网站非常复杂且非标准，这正是我想要避免的那种解决方案。我什至不使用 -webkit 和 -moz 扩展，因为它们有时会出现奇怪的不一致。但是感谢分享，无论如何它看起来不错！
确实，有足够的讨论空间。如果您使用 jQuery，那么您已经在使用 3rd-party 库来帮助消除浏览器差异。圆角和盒子阴影之类的东西已经让你陷入了浏览器之间奇怪的不一致的境地。对于在这些效果流行之前的浏览器来说，没有什么神奇的解决方案。无论您考虑 pie.htc 还是其他方法，spackle 都是 spackle。如果它运行良好——即使在具有复杂 UI 的大型应用程序上也能正常运行——那么它与任何其他选项一样值得考虑。完美可能是善的敌人。
我想要 jQuery 的原因正是这个。我已经用它来做其他事情了。它已经过验证，并将在未来得到更新和支持。另一个 JS 库将意味着另一个要下载的文件，另一个需要关心的库。这是一个原则问题。如果你走这条路，网站很快就会变得一团糟。如果某些东西是非标准的，我宁愿不使用它。