水平线但底部有阴影

Question

我想创建一条类似于在这篇文章中找到的水平线并标记为解决方案，但只有底部出现阴影。我能得到的最接近的是在线条中间显示的阴影，上下都有。

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元素必须是自闭合的。这排除了使用:beforeand:after因为自闭合元素不能有子元素。在引用的答案中，他们没有使用 的任何特定功能hr，因此我已将其转换为div此处的。