班轮梯度和右

我想学习如何使用线性渐变，但我仍然没有得到语法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

班轮梯度和右

回答

相关问题