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

前端之家收集整理的这篇文章主要介绍了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.f2er.com/css/216690.html

猜你在找的CSS相关文章