线性梯度的不同颜色的位置

时间:2013-05-09 08:21:37

标签: html css css3 linear-gradients

使用background: linear-gradient( to bottom, #fff, #ff0, #f00, #000)设置其背景

enter image description here

我可以使用css3

为这些颜色提供位置值

enter image description here

1 个答案:

答案 0 :(得分:0)

您可以使用%px等单位将它们分开

Demo(不是那么尖锐,但你可以根据自己的要求进行调整)

background: #fffea1;
background: -moz-linear-gradient(top,  #fffea1 1%, #fb8000 45%, #df0000 59%, #3f0000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#fffea1), color-stop(45%,#fb8000), color-stop(59%,#df0000), color-stop(100%,#3f0000));
background: -webkit-linear-gradient(top,  #fffea1 1%,#fb8000 45%,#df0000 59%,#3f0000 100%);
background: -o-linear-gradient(top,  #fffea1 1%,#fb8000 45%,#df0000 59%,#3f0000 100%);
background: -ms-linear-gradient(top,  #fffea1 1%,#fb8000 45%,#df0000 59%,#3f0000 100%);
background: linear-gradient(to bottom,  #fffea1 1%,#fb8000 45%,#df0000 59%,#3f0000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffea1', endColorstr='#3f0000',GradientType=0 );

这是一个handy tool,可以轻松创建复杂的渐变