logo标签列表

你能使用CSS3创建这种阴影渐变样式的线条吗？

htmlcss
7

这是我正在尝试制作的效果的图片。

我已经能够使用SVG作为背景图像来样式化<hr />，创建这种效果，但希望能够使用CSS3来实现同样的效果，但一直遇到麻烦。

我想知道是否有任何CSS大师知道实现相同的方法，或者纯CSS不能做到这一点？

感谢任何帮助。

图片链接已失效。 - mfluehr
1个回答
0

我尝试用三个图层创建效果，使用两个带透明度的背景。一个从顶部开始到中间停止，另一个从中间开始到底部结束，还有一个带有image在y轴上重复的背景。

我遵循这个url进行图层教程：http://css-tricks.com/css3-gradients/

该HTML代码仅适用于Chrome，在特定浏览器中替换/覆盖属性“-webkit-gradient”：

<html>
    <head>
    <style>
    .gradient {
    width:76px;
    height:200px;
    border:0;
    background-image:-webkit-gradient(linear, 0% 0%, 0% 50%, from(rgba(192,192,192,1)), to(rgba(192,192,192,0))),
                    -webkit-gradient(linear, 0% 50%, 0% 100%, from(rgba(192,192,192,0)), to(rgba(192,192,192,1))),
                    url(http://i41.tinypic.com/omwky.gif);
    background-repeat:repeat-y,repeat-y, repeat-y;
    }
    </style>
    </head>
<body>
    <hr class="gradient"/>
</body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接