有一个教程
here如何在photoshop中这样做：
我试图用CSS这样做。我可以得到的更接近于fiddle。
hr.fancy-line {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left,rgba(0,0),rgba(215,215,0.75),0));
background-image: -moz-linear-gradient(left,0));
background-image: -ms-linear-gradient(left,0));
background-image: -o-linear-gradient(left,0));
Box-shadow: 0px -2px 4px rgba(136,136,0.75);
}
<hr class="fancy-line"></hr>
在阴影上做一个渐变似乎很难。
有什么想法可以改善吗？
解决方法
我将使用径向渐变为伪元素而不是盒子阴影，因为它向边缘更细化。
将径向梯度定位在< hr>所以它被削减了一半。然后将另一个正确的元素放在< hr>下面，其颜色与背景和高度相同，足够大，以覆盖其余渐变。
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,0.1) 0%,0) 75%);
}
body,hr.fancy-line:after {
background: #f4f4f4;
}