水平线但底部有阴影

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/

基本相同，只是在伪元素前加了一个mask :before 而不是:after，并加了一个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;
}

水平线但底部有阴影

Horizontal line but with the shadow at the bottom

css

line

shadow