CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。通过使用 CSS3 渐变(gradients),可以减少下载的时间和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。
CSS3 定义了两种类型的渐变(gradients):
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
径向渐变(Radial Gradients)- 由它们的中心定义
语法:background: linear-gradient(direction, color-stop1, color-stop2, ...);
- direction:渐变的方向:设置渐变终点
默认为to bottom,从上到下的渐变,终点为下,
其他取值:(to bottom、to top、to right、to left、to bottom right等等)
to right:从左到右
to bottom right:对角线方向等
- color-stop1:渐变的颜色值
为了创建一个线性渐变,必须至少定义两种颜色节点(可以多个颜色)。background-image: linear-gradient(red, green);
从顶部开始的线性渐变(默认)。起点是红色,慢慢过渡到绿色:
-渐变使用角度
语法:background-image: linear-gradient(angle, color1, color2);
- 使用多个颜色节点:
- 渐变支持添加多个颜色
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
彩虹渐变
- 使用透明度(transparent)
使用rgba()函数来定义颜色节点,rgba()函数中的最后一个参数定义颜色的透明度,0表示完全透明,1表示完全不透明。
rgba(0,0,0,1)的四个参数分别为红®、绿(G)、蓝(B)、透明度(A),红绿蓝都是0-255之间的整数,分别代表颜色中各个颜色的成分。
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));定义背景从透明渐变为红色:
- 颜色不均匀渐变(设置百分比):
百分比表示指定颜色的标准中心线位置,百分比之间是过渡色background-image: linear-gradient(to right,red 10%,green 50%,blue 75%);
;
表示含义:
10% 表示 red 的颜色中心线在线性渐变方向的 10% 的位置。
50% 表示 green 的颜色中心线在线性渐变方向的 85% 的位置。
75% 表示 blue 的颜色中心线在线性渐变方向的 75% 的位置。
10% 到 50% 是 red-green 的过渡色,50%-75% 是 green-blue 的过渡色。
二、径向渐变
创建一个径向渐变,也必须至少定义两种颜色节点。同时,也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。
语法:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
-
position:渐变起点的位置,可以为百分比,默认是图形的正中心。
-
shape:渐变的形状,ellipse表示椭圆形,circle表示圆形。默认为ellipse,如果元素形状为正方形的元素,则ellipse和circle显示一样。
-