带有阴影的 JQueryUI 选项卡答案

【问题标题】：JQueryUI Tabs with shadows带有阴影的 JQueryUI 选项卡
【发布时间】：2011-03-02 12:01:51
【问题描述】：

Stackers，我需要在之前使用JQueryUI Tabs 插件创建的标签周围放置阴影。阴影必须位于选项卡的右侧和顶部。

使用 moz-box-shadow 或类似的东西可能很棒，但我的应用程序也应该在 IE 上查看。

我的 JQuery 代码（很简单）：

$("#tabs").tabs();

这是它的外观：

有人知道怎么做吗？谢谢！

【问题讨论】：

你能在这些标签中添加一个类吗？
@Kyle 当然，如果需要，我可以添加它们。

标签： jquery css jquery-ui jquery-ui-tabs shadow

【解决方案1】：

使用 PIE.htc css3 阴影可以在 Internet Explorer 6+ 中使用：http://css3pie.com/（提供演示）

PIE 阴影看起来比 IE 阴影/投影过滤器更好。

【讨论】：

我需要这样的东西。谢谢威廉。

【解决方案2】：

您可以在真实浏览器中使用 CSS3 并为 IE 使用过滤器：

将一个类添加到您的标签 tab-shadow 并使用此 CSS：

.tab-shadow
{
    box-shadow:2px -2px 6px #333333; /*standard CSS3*/
    -moz-box-shadow:2px -2px 6px #333333; /*firefox*/
    -webkit-box-shadow:2px -2px 6px #333333; /*webkit (safari, chrome*/
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=310, Color=’#000000′); /*ie*/
    height: 100px;
    width: 200px;
    border: 1px dashed #f00;
    background: #fff;
}

并不是说它只能在带有边框的 IE 中工作（根据个人经验。）

This should be what you're after :)

【讨论】：

您的解决方案效果很好。我投票赞成这个答案，但@Willem 的答案更符合我的需要。非常感谢您的帮助凯尔。干得好:)