CSS3渐变色彩linear-gradient和radial-gradient


   作者蓝石榴    由lan16转载自蓝石榴    更新于2016-09-15 16:27    已被浏览178次

1.简介:
  CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同,这里我们只针对线性渐变的 W3C 标准语法来分析其用法,其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

2.线性渐变:
  语法:
  linear-gradient([渐变方向], [颜色], [颜色],···);
  ①渐变方向 0deg(角度)等同于to top从下向上渐变;
  ②渐变方向 90deg(角度)等同于to right从左向右渐变;
  ③渐变方向 180deg(角度)等同于to bottom从上向下渐变;
  ④渐变方向 270deg(角度)等同于to left从右向左渐变;
  ⑤渐变方向 270deg(角度)等同于to top left从右下角向左上角渐变;
  ⑥渐变方向 315deg(角度)等同于to top right从左下角向右上角渐变
  代码示例:
  div{
    width:200px;
    height:200px;
    background-image:linear-gradient(to left,red,orange,yellow,green,blue,indigo,violet)
  }
  效果如下:

3.径向渐变:
  语法:
  radial-gradient([颜色], [颜色],···);
  代码示例:
  div{
    width:200px;
    height:200px;
    background-image:radial-gradient(red,orange,yellow,green,blue,indigo,violet)
  }
  效果如下: