仅使用CSS创建漂亮的水平线

Question

有一个教程在这里就如何做到这一点在Photoshop:

我只想用CSS做这件事.我能越接近就是这个小提琴.

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>,使其切成两半.然后在另一个psuedo元素下面放置一个<hr>与背景颜色相同的颜色,高度足以覆盖渐变的其余部分.

更新了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;
}