Question

我正在尝试学习如何使用线性渐变，但仍然没有得到100％的语法，正如我在代码中看到的那样：

＆＃13;

#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) */
}

＆＃13;

<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>

＆＃13;

我如何使用渐变，使左边的黑色在中央变为红色，然后在右边再次淡化为红色？

现在我可以在左侧和中间做，但我也在努力摆脱右侧。

希望你能帮忙

Answer 1

再次添加黑色，再次淡化为黑色。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

试试这个：

#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>

Answer 3

#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>

左侧，中间和右侧的衬里渐变

3 个答案: