水平線但底部有陰影

Question

我想創建一個與this post上找到的水平線類似的水平線，並標記爲解決方案，但只有陰影出現在底部。 我能得到的最接近的是在線條中間顯示的陰影，無論是向上還是向下。

Answer 1

是否這樣？

.fancy-line { 
 
    border: 0; 
 
    height: 1px; 
 
    position: relative; 
 
    margin: 0.5em 0; 
 
} 
 
.fancy-line:before { 
 
    top: -0.5em; 
 
    height: 1em; 
 
} 
 
.fancy-line:after { 
 
    height: 0.5em; 
 
    top: calc(-0.5em + 1px);  /* adjusted this */ 
 
} 
 

 
.fancy-line:before, .fancy-line:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 

 
.fancy-line, .fancy-line:before { 
 
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 75%); 
 
} 
 

 
body, .fancy-line:after { 
 
    background: #f4f4f4; 
 
}

-Some Text- 
 
<div class="fancy-line"></div>

原始代碼產生徑向漸變並覆蓋它的底部一半用彩色一樣的背景的塊。根據您的要求調整它只是將覆蓋物從底部移動到頂部的問題。請注意：hr元素必須自行關閉。這排除了使用:before和:after，因爲自閉元素不能有孩子。在參考答案中，他們沒有使用hr的任何特殊功能，所以我在這裏將其轉換爲div。

Answer 2

在此請看：http://jsfiddle.net/9rovqvoj/1/

它基本上是相同的，但加入僞元素之前口罩：之前不是：後添加的z-index它。

hr.fancy-line:after { 
    top: -0.5em; 
    height: 1em; 
} 

hr.fancy-line:before { 
    content: ''; 
    height: 0.5em; 
    top: -0.5em; 
    z-index: 999; 
}