这个选项卡阴影是否只能在 CSS 中使用？答案

【问题标题】：Is this tab-shadow possible in only CSS?这个选项卡阴影是否只能在 CSS 中使用？
【发布时间】：2011-06-08 19:05:02
【问题描述】：

是否可以复制您在此处看到的阴影效果：http://a.imagehost.org/0835/sample.png，无需任何图像且仅使用 CSS？

让我澄清一下....看看阴影，它在选项卡和内容块本身周围，而不仅仅是一个简单的 div 标签...

【问题讨论】：

请不要用无用的 cmets 把问题搞得一团糟，除非你有什么要贡献的

标签： css

【解决方案1】：

由于您的标签很可能包含一个锚点以使其可点击，因此我将锚点设置为块元素，提供背景颜色，并增加高度以覆盖阴影的底部。

这是一个演示： http://jsfiddle.net/xFbfp/1/

【讨论】：

【解决方案2】：

试试这个：

#tab {
    -moz-box-shadow: 0px -10px 5px #888;
    -webkit-box-shadow: 0px -10px 5px #888;
    box-shadow: 0px -10px 5px #888;
    z-index: 1;
}
#content {
    -moz-box-shadow: 0px 0px 5px #888;
    -webkit-box-shadow: 0px 0px 5px #888;
    box-shadow: 0px 0px 5px #888;
    z-index: 0;
}

http://www.css3.info/preview/box-shadow/

【讨论】：

你不能把它应用到两个单独的 div 上吗？一个上面有阴影的，主要内容框（选项卡下）下面会有阴影吗？
如果标签位于内容区域的顶部，标签的阴影在标签和内容区域之间仍然可见...
如果选项卡的阴影在其上方（即阴影永远不会出现在选项卡下方），则不会。

【解决方案3】：

不，不是那种“褪色”的效果。您可以通过调整一些边距来制作实心阴影。但是你需要一张背景图片来获得这种褪色效果。

或

你可以使用 CSS3 来做这件事，就像这样：

#mydiv
{
   box-shadow: 10px 10px 5px #888;
}

【讨论】：

【解决方案4】：

你需要两个盒子。一个用于主要的，一个用于选项卡。该选项卡的底部没有阴影，必须与较大的框重叠以覆盖其顶部阴影的那部分。

【讨论】：

如何告诉阴影不在元素的底部？
你是对的。您需要第三个没有阴影的盒子来覆盖它。

【解决方案5】：

只是一个想法......

如果您使用 div：您可以尝试将 z-index 与选项卡 div 一起使用，并将其与内容 div 对齐以覆盖（内容 div）的阴影...

但是圆角是tab和content div之间的问题...

【讨论】：

这行得通，除了我试图在内容 div 的顶部也有一个阴影而不覆盖标签

【解决方案6】：

Creating a CSS3 box-shadow on all sides but one 提供了有关如何解决各种盒子阴影问题的有用信息。

【讨论】：

【解决方案7】：

这是两个绝对定位的 div，标签 div z-indexed 在内容 div 的顶部。您只需为选项卡阴影设置 -y 3px 偏移量和 3 像素模糊，就可以了。通过使用它，您需要使用具有 0.5 alpha 值的 rgba 以获得正确的阴影效果。

【讨论】：