你能用CSS3创建这个阴影渐变样式线吗？

Question

我已经能够<hr />使用SVG作为背景图像来创建这种效果,但是我希望能够使用CSS3生成相同的东西但我一直遇到麻烦.

我想知道是否有任何CSS专家可能知道一种方法来实现相同的事情,或者它是否真的不可能与纯CSS？

谢谢你的帮助.

Answer 1

san*_*eep 8

我创建你想要的效果请检查:

http://jsfiddle.net/fx5Lk/

Answer 2

小智 0

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

我按照这个网址查看图层教程：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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，9 月前
查看次数：	2114 次
最近记录：	13 年，9 月前