css - 使用 CSS3 减少内框阴影

Question

我想知道是否(也许如何)像下图所示的一些文本阴影是可能的:

阴影在几个列表元素上递减。我正在考虑根据悬停在哪个元素上为每个元素提供不同的悬停类，但我什至不确定如何使用 CSS 获得如此减少的阴影。如果有人能够教我如何做到这一点，那就太好了。如果你愿意，可以使用我的 jsfiddle代码。

Answer 1

你可以试试这样的东西

demo

(单击一个选项卡将其选中并查看阴影)

并在所选选项卡的伪元素上使用 box-shadow 获得效果。

应该是这样的

HTML:

<ul class='tabs'>
    <li><a href='#' tabindex='1'>1st tab</a></li>
    <!-- as many tabs as you would like -->
    <li><a href='#' tabindex='1'>aaand another tab</a></li>
</ul>

相关CSS:

.tabs { overflow: hidden; margin-top: 7em; list-style: none; }
.tabs li { float: left; border-right: 1px dotted #222; }
.tabs a {
    display: block;
    position: relative;
    padding: 1em .66em;
    font: .66em/1.1 sans-serif;
    text-transform: uppercase;
    text-decoration: none;
}
.tabs a:focus {
    z-index: 3;
    outline: none;
    box-shadow: 0 -.5em 1.5em black;
    background: lemonchiffon;
}
.tabs a:focus:before, .tabs a:focus:after {
    position: absolute;
    bottom: -1px;
    width: 30em; height: 1px;
    box-shadow: 0 0 20px 1px black;
    content: '';
}
.tabs a:before {
    left: -30.5em;
    transform: rotate(-3deg);
    transform-origin: 100% 100%;
}
.tabs a:after {
    right: -30.5em;
    transform: rotate(3deg);
    transform-origin: 0 100%;
}