更改漸變寬度

下面的代碼使用CSS漸變創建對角線。但是，我怎樣才能使彩色線更薄約2px，而白色空間之間的大約7px？更改漸變寬度

body { 
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.25, #fff), color-stop(0.25, #9CC), color-stop(0.5, #9CC), color-stop(0.5, #fff), color-stop(0.75, #fff), color-stop(0.75, #9CC)); 
background-image: -webkit-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CCb 50%, #fff 50%, #fff 75%, #9CC 75%); 
background-image: -moz-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9cc 75%); 
background-image: -ms-linear-gradient(right bottom, #fff 0%, #fff 25%, #bbb 25%, #bbb 50%, #fff 50%, #fff 75%, #bbb 75%); 
background-image: -o-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#9CC',GradientType=0);/IE6-8 */ 
background-image: linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%); 
background-size: 5px 5px; 
width:100%; 
height:100%; 
}

來源

2014-01-24 angela

你有沒有考慮過使用js旋轉插件，如jqueryrotat è？您可以創建更簡單的元素，例如hr或div，然後旋轉它們。只是一個建議 – gskema

你必須通過改變梯度的百分比以較小或較大的值，#fff =白色所以範圍應該更大做到這一點。 #9CC是藍色，其範圍應該更小。

body { 
    background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.35, #fff), color-stop(0.35, #9CC), color-stop(0.5, #9CC), color-stop(0.5, #fff), color-stop(0.85, #fff), color-stop(0.85, #9CC)); 
    background-image: -webkit-linear-gradient(right bottom, #fff 0%, #fff 35%, #9CC 35%, #9CCb 50%, #fff 50%, #fff 85%, #9CC 85%); 
    background-image: -moz-linear-gradient(right bottom, #fff 0%, #fff 35%, #9CC 35%, #9CC 50%, #fff 50%, #fff 85%, #9cc 85%); 
    background-image: -ms-linear-gradient(right bottom, #fff 0%, #fff 35%, #bbb 35%, #bbb 50%, #fff 50%, #fff 85%, #bbb 85%); 
    background-image: -o-linear-gradient(right bottom, #fff 0%, #fff 35%, #9CC 35%, #9CC 50%, #fff 50%, #fff 85%, #9CC 85%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#9CC', GradientType=0); 
    /IE6-8 */ background-image: linear-gradient(right bottom, #fff 0%, #fff 35%, #9CC 35%, #9CC 50%, #fff 50%, #fff 85%, #9CC 85%); 
    background-size: 5px 5px; 
    width:100%; 
    height:100%; 
}

Demo

我改變了25%到35%和75%到80%相應其減少的範圍內，因此，藍線的寬度和增大的範圍內，因此白線的寬度

自己改變它們你可能想要使用一個find and replace tool

來源

2014-01-24 16:11:54

更改漸變寬度

回答

相關問題