css3背景渐变色代码

从上到下
#grad {
  background: -webkit-linear-gradient(red, blue);
  background: -o-linear-gradient(red, blue);
  background: -moz-linear-gradient(red, blue);
  background: linear-gradient(red, blue);
}
从左到右
#grad {
  background: -webkit-linear-gradient(left, red , blue);
  background: -o-linear-gradient(right, red, blue);
  background: -moz-linear-gradient(right, red, blue);
  background: linear-gradient(to right, red , blue);
}
从左上到右下
#grad {
  background: -webkit-linear-gradient(left top, red , blue);
  background: -o-linear-gradient(bottom right, red, blue);
  background: -moz-linear-gradient(bottom right, red, blue);
  background: linear-gradient(to bottom right, red , blue);
}
使用角度
#grad {
  background: -webkit-linear-gradient(180deg, red, blue);
  background: -o-linear-gradient(180deg, red, blue);
  background: -moz-linear-gradient(180deg, red, blue);
  background: linear-gradient(180deg, red, blue);
}
多种颜色节点
#grad {
  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 
  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 
  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}
使用透明度
#grad {
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
径向渐变
#grad {
  background: -webkit-radial-gradient(red, green, blue);
  background: -o-radial-gradient(red, green, blue);
  background: -moz-radial-gradient(red, green, blue);
  background: radial-gradient(red, green, blue);
}
形状为圆形的径向渐变
#grad {
  background: -webkit-radial-gradient(circle, red, yellow, green);
  background: -o-radial-gradient(circle, red, yellow, green);
  background: -moz-radial-gradient(circle, red, yellow, green);
  background: radial-gradient(circle, red, yellow, green);
}

颜色不均匀的径向渐变

#grad {
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
  background: -o-radial-gradient(red 5%, green 15%, blue 60%);
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%);
  background: radial-gradient(red 5%, green 15%, blue 60%);
}

©️李联华的博客网 当前IP地址:3.233.242.67,欢迎您的访问!

温馨提示 : 非特殊注明,否则均为李联华的博客原创文章,本站文章未经授权禁止任何形式转载
文章链接:https://www.ooize.com/css3-background-gradient-code.html

订阅文章

在下面输入您的电子邮件地址以订阅我们的文章

订阅
提醒
guest

0 评论
内联反馈
查看所有评论
Loading...