通過CSS的狹縫線效果

Question

任何人都知道在CSS中創建這些線（參考圖像）的方法之一？

Answer 1

這裏有一個粗略的估計開始。你需要調整具體細節。基本上我所做的就是創建一個懸垂div，在它下面是一個div，它會創建一個在結尾處出現衰退的影子。突出的div位於較高層，因此您只能看到陰影的邊緣。

演示： http://jsfiddle.net/X5muV/

再一個，稍深：http://jsfiddle.net/X5muV/1/

HTML：

<div id="container"> 
    <div id="overhang"></div> 
    <div id="falloff-shadow"></div> 
</div> 

CSS：

#container { 
     background: #5A5A5A; 
     width: 700px; 
     padding: 200px 0 80px 0px; 
    } 
    #overhang { 
     background: #5A5A5A; 
     border-top: 1px solid #666; 
     height: 80px; 
     width: 600px; 
     margin: 0 auto; 
     position: relative; 
     z-index: 5; 
    } 
    #falloff-shadow { 
     width: 500px; 
     margin: 0 auto; 
     -webkit-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1); 
     -moz-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1); 
     box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1); 
     position: relative; 
     z-index: 1; 
     height: 1px; 
     top: -65px; 
    } 

Answer 2

是的，你可以在css3中創建它。你將不得不結合一些效果，但我認爲一個灰色線（你將不得不添加一些額外的空間，稍後解釋）與影子會做。

要編寫只出現在一側（上圖）的影子，看看這個提問/回答：How can I add a box-shadow on one side of an element?

基於這個例子中，你可以嘗試這樣的：

.myDiv 
{ 
    width: 700px; 
    height: 50px; 
    border-top: 2px solid #333; 
    -webkit-box-shadow: 10px 0px 0px -2px #888 ; 
} 

的陰影仍然在左邊，但隱藏（-2px）。這給你一個單一陰影的幻覺。這只是一個啓動，嘗試不同的選擇，如果您有任何特殊問題，請回來。但先自己做吧。