水平线但底部有阴影

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; 
}