Q

您可以使用CSS3創建此陰影漸變樣式線嗎？

2012-03-12 62 views 8 likes

8

Here's a picture of exactly what I'm trying to produce.您可以使用CSS3創建此陰影漸變樣式線嗎？

我已經能夠使用SVG作爲背景圖像創建這個效果，風格<hr />，而是希望能夠使用CSS3我沒空，但一直有麻煩產生同樣的事情。

我想知道如果有任何CSS大師可能知道一種方式來實現相同的事情，或者如果它不是真正可能的W /純CSS？

感謝您的任何幫助。

2012-03-12 C.J.

A

回答

8

創建要請這樣的效果：

http://jsfiddle.net/fx5Lk/

2012-03-12 15:20:56 sandeep

+0

大工作，謝謝！ – 2012-03-12 15:56:25

+0

我看到的唯一問題是它不能縮放。如果你想增加.bor的高度，你可以得到陰影來匹配沒有每次陰影高度的硬編碼嗎？ – 2012-03-12 16:11:26

+0

實際上設置頂部和底部約〜（-55px）;而不是在'.sha：after'上設置高度，而不是這樣:) – 2012-03-12 16:17:01

0

我試圖用三層，兩個背景與alpha透明度創建效果。一個從頂部開始並停在中間，另一個從中間開始在底部結束，另一個背景在y軸上重複一個image。

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

的HTML代碼，只能在Chrome中，替代/覆蓋屬性「-webkit-梯度」爲特定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>

2012-03-12 15:58:17 rfranr

相關問題