CSS3渐变

CSS3渐变共有3种：（1）线性渐变（linear-gradient）；（2）径向渐变（radial-gradient）；（3）重复渐变（repeating-linear-gradient）；

线性渐变

• 线性渐变，指的就是指在一条直线上进行渐变，在网页中大多数渐变效果都是线性渐变。

语法：background:linear-gradient(方向，开始颜色，结束颜色);

• 说明：线性渐变的方向取值有2种，一种是使用角度deg，另外一种是使用关键字：
  
  

  线性渐变的方向取值
• 第2个参数和第3个参数，表示开始颜色和结束颜色，取值可以为关键字、十六进制颜色值、RGBA颜色等

在浏览器预览效果

• 当然也可以使用长度单位来控制渐变的开始位置与结束位置，在颜色后面用空格隔开加长度，长度单位可以是px也可以是%等，举例：

在浏览器预览效果

径向渐变

• CSS3径向渐变，是一种从起点到终点颜色从内到外进行圆形渐变（从中间向外拉，像圆一样）。CSS3径向渐变是圆形或椭圆形渐变，颜色不再沿着一条直线渐变，而是从一个起点向所有方向渐变

语法：background:radial-gradient(position ,shape size,start-color,stop-color)

• 说明：
  • position：定义圆心位置；
  • shape size：由2个参数组成，shape定义形状（圆形或椭圆），size定义大小；
  • start-color：定义开始颜色值；
  • stop-color：定义结束颜色值；
  • position、shape size都是可选参数，如果省略，则表示该项参数采用默认值。
• 1、定义圆心位置position
  • position用于定义径向渐变的圆心位置，属性值跟background-position属性值相似，也有2种情况：（1）长度值，如px、em或百分比等；（2）关键字。
  • 如果提供两种参数第一个参数表示横坐标，第二个参数表示纵坐标，如果只提供一个，第二个值默认为50%，即center
    
    

    圆心位置取值（关键字）
• 举例：

    
    
    


    
默认值（center）
    
top

在浏览器预览效果

• 2、定义形状shape和定义大小size
  • （1）定义形状shape
    
    

    shape参数取值
• 举例：

    
    
    


    
默认值（ellipse）
    
circle

在浏览器预览效果

• （2）定义大小size
  • size主要用于定义径向渐变的结束形状大小。
    
    

    size参数取值
• 举例

    
    
    


    
closest-side
    
closest-corner
    
farthest-side
    
farthest-corner

在浏览器预览效果

• 3、开始颜色start-color和结束颜色stop-color
• 参数start-color用于定义开始颜色，参数stop-color用于定义结束颜色。颜色可以为关键词、十六进制颜色值、RGBA颜色值等。
  径向渐变也接受一个颜色值列表，用于同时定义多种颜色的径向渐变。
• 举例：

在浏览器预览效果

• 分析：默认情况下，径向渐变颜色节点是均匀分布的，不过我们也可以为每一种颜色添加百分比，来使得各个颜色节点不均匀分布。
• 举例：

    
    
    


    
颜色均匀分布
    
颜色不均匀分布

在浏览器预览效果

重复渐变

• 重复渐渐repeating参数与线性渐变linear-gradient和径向渐变linear-gradient相同,重复渐变是在线性渐变和径向渐变基础上的延伸
• 语法：

repeating-linear-gradient    重复线性渐变
repeating-radial-gradient    重复经向渐变

• 举例：

线性渐变未重复

线性渐变重复

CSS渐变一些小实例

径向渐变-关键词表示半径大小
CSS3径向渐变制作圆形图标按钮
CSS3重复渐变制作纹理图案
径向渐变-使用关键字表示圆心的位置
线性渐变制作的按钮
CSS3线性渐变-angle用角度设置渐变方向