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/

它基本相同，但在伪元素之前添加一个掩码：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;
}

水平线但底部有阴影

2 个答案: