css - 水平线但底部有阴影

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>

原始代码生成一个径向渐变，并用与背景颜色相同的 block 覆盖它的下半部分。根据您的要求进行调整，只需将覆盖件从底部移动到顶部即可。

另外，请注意:hr 元素需要自动关闭。这排除了 :before 和 :after 的使用，因为自闭元素不能有子元素。在引用的答案中，他们没有使用 hr 的任何特定功能，因此我在此处将其转换为 div。