css - 仅用 CSS 创建一条漂亮的水平线

Question

有教程here关于如何在 photoshop 中执行此操作:

我正在尝试仅使用 CSS 来执行此操作。我能得到的更近的是这个 fiddle .

hr.fancy-line { 
    border: 0; 
    height: 1px; 
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
    box-shadow: 0px -2px 4px rgba(136,136,136,0.75);
}

<hr class="fancy-line"></hr>

在阴影上做渐变看起来很困难。 我有什么改进方法吗？

Answer 1

我会使用 radial-gradient到伪元素而不是 box-shadow因为它向边缘逐渐变细。

定位 radial-gradient在 <hr> 之上所以它被切成两半。然后将另一个伪元素放在 <hr> 的正下方与背景颜色相同，高度刚好足以覆盖渐变的其余部分。

Updated JSFiddle

---

CSS

hr.fancy-line { 
    border: 0; 
    height: 1px;

}
hr.fancy-line:before {
    top: -0.5em;
    height: 1em;
}
hr.fancy-line:after {
    content:'';
    height: 0.5em;
    top: 1px;
}

hr.fancy-line:before, hr.fancy-line:after {
    content: '';
    position: absolute;
    width: 100%;
}

hr.fancy-line, hr.fancy-line:before {
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
}

body, hr.fancy-line:after {
    background: #f4f4f4;
}