CSS淡出没有图像的水平规则/线条样式的div效果

Question

我是极少使用图像的忠实拥护者，想知道是否有人有策略(或者是否可能)使用纯静态 CSS 创建这种东西？

http://www.flickr.com/photos/jahimandahalf/6780397612/

我指的是一条线看起来越来越细和淡出的效果，以及它下面的阴影效果。

我在想也许可以像三 Angular 形一样用它做一个 CSS 形状技巧:

http://css-tricks.com/snippets/css/css-triangle/

或者可能使用“变换”在框阴影上旋转:

zenelements.com/blog/css3-transform/

有什么想法吗？

Answer 1

您可以使用 CSS3 的停止和 :after伪元素来实现这样的效果。诀窍是为 <hr> 添加边框使用 :after 元素伪元素并将其放置在初始渐变的中心，颜色柔和，以渐变结束。

这是一个快速 demo , 和另一个 demo使用一些颜色。