你能用CSS3創建這個陰影漸變樣式線嗎？

Question

這是我正在嘗試制作的圖片。

我已經能夠使用SVG作為背景圖像來設置<hr />來創建這種效果，但是我希望能夠使用CSS3生成相同的東西，但我一直遇到麻煩。

我想知道是否有任何CSS專家可能知道一種方法來實現相同的事情，或者它是否真的不可能與純CSS？

謝謝你的幫助。

Answer 1

我創建你想要的效果請檢查：

http://jsfiddle.net/fx5Lk/

Answer 2

我嘗試用三層創建效果，兩個背景具有alpha不透明度。 一個從頂部開始並在中間停止，另一個從底部中間開始，另一個在y軸上重復圖像切片。

我按照這個網址進行圖層教程： http ： //css-tricks.com/css3-gradients/

html代碼僅適用於Chrome，替換/覆蓋屬性“-webkit-gradient”以獲取特定的broser：

<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 個解決方案

解決方案1
8 已采納 2012-03-12 15:20:56

解決方案2
0 2012-03-12 15:58:17

你能用CSS3創建這個陰影漸變樣式線嗎？

問題描述

2 個解決方案

解決方案1 8 已采納 2012-03-12 15:20:56

解決方案2 0 2012-03-12 15:58:17

解決方案1
8 已采納 2012-03-12 15:20:56

解決方案2
0 2012-03-12 15:58:17