班輪梯度和右

我想學習如何使用線性漸變，但我仍然沒有得到語法100％，你可以在我的代碼中看到：班輪梯度和右

#grad1 { 
 
    height: 55px; 
 
    background: -webkit-linear-gradient(left, #000, #ed1c24); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(left, #000, #ed1c24); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(left, #00, #ed1c24); /* For Fx 3.6 to 15 */ 
 
    background: linear-gradient(to right, #000, #ed1c24); /* Standard syntax (must be last) */ 
 
}

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold"> 
 
Gradient Background 
 
</div> 
 

 
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

如何使用漸變使左側的黑色漸變爲中央的紅色，然後再次漸漸變爲紅色？

現在我可以在左邊和中間做，但我也很努力地把它放在右邊。

希望你能幫助

來源

2017-08-16 Ragmah

試試這個：

#grad1 { 
 
    height: 200px; 
 
    background: #000000; /* Old browsers */ 
 
    background: -moz-linear-gradient(left, #000000 0%, #dd2323 50%, #dd2323 52%, #000000 100%); 
 
    background: -webkit-linear-gradient(left, #000000 0%,#dd2323 50%,#dd2323 52%,#000000 100%); 
 
    background: linear-gradient(to right, #000000 0%,#dd2323 50%,#dd2323 52%,#000000 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000',GradientType=1); /* IE6-9 */ 
 
}

<div id="grad1"></div>

來源

2017-08-16 09:29:39 krusty

欣賞支持 – Ragmah

只需再次添加黑色再犯黑漸變。

#grad1 { 
 
    height: 55px; 
 
    background: linear-gradient(to right, #000, #ed1c24, #000); 
 
}

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold"> 
 
Gradient Background 
 
</div> 
 

 
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

來源

2017-08-16 09:32:16

#grad1 { 
 
    height: 55px; 
 
    background: red; /* For browsers that do not support gradients */ 
 
    background: -webkit-radial-gradient(red, yellow, green); /* Safari */ 
 
    background: -o-radial-gradient(red, yellow, green); /* For Opera */ 
 
    background: -moz-radial-gradient(red, yellow, green); /* For Firefox */ 
 
    background: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */ 
 
}

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold"> 
 
Gradient Background 
 
</div> 
 

 
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

來源

2017-08-16 09:56:30

班輪梯度和右

回答

相關問題