Question

Here's a picture of exactly what I'm trying to produce.

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

我想知道是否有任何CSS专家可能知道如何实现同样的事情，或者它是否真的不可能用纯CSS？

感谢您的帮助。

Answer 1

我创建了你想要的效果，请检查一下：

http://jsfiddle.net/fx5Lk/

Answer 2

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

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

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

2 个答案: