这个tab-shadow只能在CSS中使用吗？

Question

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

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

Answer 1

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

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

Answer 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/

Answer 3

不是那种'褪色'的效果。你可以通过玩一些边缘来做一个坚实的阴影。但是你需要一个背景图像才能获得褪色效果。

OR

您可以使用CSS3来执行此操作：

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

Answer 4

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

Answer 5

只有一个想法...

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

但是圆角是制表符和内容div之间的问题......

Answer 6

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

Answer 7

这是两个绝对定位的div，其中tab div-index在内容div的顶部。你只需为标签阴影设置-y 3px偏移量和3像素模糊，你就可以了。从玩它开始，你需要使用具有.5 alpha值的rgba来获得正确的阴影效果。