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

我是一个极少使用图像的大粉丝,并且想知道有没有人有策略(或者是否可能)用纯静态CSS创建这样的事情？

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

我指的是一条线条的效果,看起来变得越来越瘦,并且其下面的阴影效应变淡.

我以为可能会像三角形那样做一个CSS形状的技巧：

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

或者也可以使用’transform’在盒子阴影上旋转：

zenelements.com/blog/css3-transform/

有任何想法吗？

解决方法

您可以使用CSS3的停止位置和：after伪元素来实现这样的效果.诀窍是将边框添加到< hr>元素通过使用：after伪元素并将其定位在初始渐变的中心,并以渐变渐变的柔和色彩.

这是一个快速的demo,另一个demo使用一些颜色.

原文地址：https://www.jb51.cc/css/216690.html