減少內盒陰影與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%; 
} 

Answer 2

你可以增加一個<li>到<ul>的整個寬度內坐，旋轉它，並給它一個影子..

HTML：

... 
    </li> 
     <li class="shadow">1</li> 
    </ul> 

CSS：

ul 
{ 
    overflow: hidden; 
    height: 50px; 
} 

li.shadow 
{ 
    width: 100%; 
    height: 100%; 
    position: relative; 
    top: 15px; 
    box-shadow: 0px 0px 45px #000; 
    -webkit-transform:rotate(-1deg); 
} 

http://jsfiddle.net/Kyle_Sevenoaks/4Luet/1/