css漸變對角線剝離圖案行爲怪異

我跟着this question在我網站的某些元素中創建對角線模式。但是，每個元素的結果都不相同。css漸變對角線剝離圖案行爲怪異

例如我的按鈕按預期工作：
Diagonal gradient as expected

然而，當我嘗試將其應用到其他元素，如：
Diagonal gradient weird

線條顯得不規律崩潰，結果不一樣。

我的CSS代碼是

background-color: transparent; 
background-image: repeating-linear-gradient(-45deg, rgba(29,178,216,0.3), rgba(29,178,216,0.2) 1px, transparent 1px, transparent 3px);

任何想法，爲什麼發生這種情況？非常感謝。

來源

2014-02-05 ithil

請看看這有助於[鏈接]（https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient） –

試試這個：

background-image: -webkit-repeating-linear-gradient(-45deg, rgba(29,178,216,0.3), rgba(29,178,216,0.3) 25%, transparent 25%, transparent 50%, rgba(29,178,216,0.3) 50%); 
background-image: -moz-repeating-linear-gradient(-45deg, rgba(29,178,216,0.3), rgba(29,178,216,0.3) 25%, transparent 25%, transparent 50%, rgba(29,178,216,0.3) 50%); 
background-image: -ms-repeating-linear-gradient(-45deg, rgba(29,178,216,0.3), rgba(29,178,216,0.3) 25%, transparent 25%, transparent 50%, rgba(29,178,216,0.3) 50%); 
background-image: -o-repeating-linear-gradient(-45deg, rgba(29,178,216,0.3), rgba(29,178,216,0.3) 25%, transparent 25%, transparent 50%, rgba(29,178,216,0.3) 50%); 
background-image: repeating-linear-gradient(-45deg, rgba(29,178,216,0.3), rgba(29,178,216,0.3) 25%, transparent 25%, transparent 50%, rgba(29,178,216,0.3) 50%); 

-webkit-background-size: 4px 4px; 
    -moz-background-size: 4px 4px; 
    -o-background-size: 4px 4px; 
     background-size: 4px 4px; 

/* Background size must be an even number! */

來源

2014-03-17 12:45:31

css漸變對角線剝離圖案行爲怪異

回答

相關問題