CSS是在各种Web文档中添加样式的机制。 CSS的重要功能之一包括渐变。渐变允许显示两种或多种颜色之间的平滑过渡。
有两种类型的渐变。
线性渐变：它包括平滑的颜色过渡, 包括向上, 向下, 向左, 向右和对角线过渡。创建线性渐变所需的至少两种颜色。然后, 线性渐变中可能会包含两种以上的颜色元素。渐变效果需要起点和方向。
语法如下：
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);从上到下：
在此图像中, 过渡开始为白色, 并以绿色结束。交换颜色顺序时, 过渡将以绿色开始, 并以白色结束。
例子：
<!DOCTYPE html>
< html >
< head >
< title >CSS Gradients</ title >
< style >
#main {
height: 200px;
background-color: white;
background-image: linear-gradient(white, green);
}
.gfg {
text-align:center;
font-size:40px;
font-weight:bold;
padding-top:80px;
}
.geeks {
font-size:17px;
text-align:center;
}
</ style >
</ head >
< body >
< div id = "main" >
< div class = "gfg" >lsbin</ div >
< div class = "geeks" >A computer science portal for geeks</ div >
</ div >
</ body >
</ html >输出如下：
左到右：
在此图中, 过渡从左到右开始。它从白色过渡到绿色。
例子：
<!DOCTYPE html>
< html >
< head >
< title >CSS Gradients</ title >
< style >
#main {
height: 200px;
background-color: white;
background-image: linear-gradient(to right, white, green);
}
.gfg {
text-align:center;
font-size:40px;
font-weight:bold;
padding-top:80px;
}
.geeks {
font-size:17px;
text-align:center;
}
</ style >
</ head >
< body >
< div id = "main" >
< div class = "gfg" >lsbin</ div >
< div class = "geeks" >A computer science portal for geeks</ div >
</ div >
</ body >
</ html >输出如下：
对角线：
此过渡从左上角开始到右下角。它从绿色过渡到白色开始。对于对角渐变, 需要同时指定水平和垂直起始位置。
例子：
<!DOCTYPE html>
< html >
< head >
< title >CSS Gradients</ title >
< style >
#main {
height: 200px;
background-color: white;
background-image: linear-gradient(to bottom right, green, rgba(183, 223, 182, 0.4));
}
.gfg {
text-align:center;
font-size:40px;
font-weight:bold;
padding-top:80px;
}
.geeks {
font-size:17px;
text-align:center;
}
</ style >
</ head >
< body >
< div id = "main" >
< div class = "gfg" >lsbin</ div >
< div class = "geeks" >A computer science portal for geeks</ div >
</ div >
</ body >
</ html >输出如下：
重复线性渐变：
CSS允许用户使用单个函数repeating-linear-gradient()来实现多个线性渐变。此处的图像在每个过渡中包含3种颜色, 并带有一定百分比值。
例子：
<!DOCTYPE html>
< html >
< head >
< title >CSS Gradients</ title >
< style >
#main {
height: 200px;
background-color: white;
background-image: repeating-linear-gradient(#090, #fff 10%, #2a4f32 20%);
}
.gfg {
text-align:center;
font-size:40px;
font-weight:bold;
padding-top:80px;
}
.geeks {
font-size:17px;
text-align:center;
}
</ style >
</ head >
< body >
< div id = "main" >
< div class = "gfg" >lsbin</ div >
< div class = "geeks" >A computer science portal for geeks</ div >
</ div >
</ body >
</ html >输出如下：
线性渐变角度：
CSS允许用户以线性渐变实现方向, 而不是将自己限制为预定义的方向。
例子：
<!DOCTYPE html>
< html >
< head >
< title >CSS Gradients</ title >
< style >
#main {
height: 200px;
background-color: white;
background-image: repeating-linear-gradient(-45deg, #090, #2a4f32 10%);
}
.gfg {
text-align:center;
font-size:40px;
font-weight:bold;
padding-top:80px;
}
.geeks {
font-size:17px;
text-align:center;
}
</ style >
</ head >
< body >
< div id = "main" >
< div class = "gfg" >lsbin</ div >
< div class = "geeks" >A computer science portal for geeks</ div >
</ div >
</ body >
</ html >输出如下：
CSS径向渐变：
径向梯度不同于线性梯度。它从一个点开始并向外散发。默认情况下, 第一种颜色从元素的中心位置开始, 然后向着元素的边缘逐渐淡出为最终颜色。直到指定为止, 淡入淡出的发生率均相等。
语法如下：
background-image: radial-gradient(shape size at position, start-color, ..., last-color);径向渐变-均匀间隔的色标：
在CSS中, 默认情况下, 淡入淡出的发生率相同。下图显示了带有均匀色标的"径向渐变"。
例子：
<!DOCTYPE html>
< html >
< head >
< title >CSS Gradients</ title >
< style >
#main {
height: 350px;
width: 700px;
background-color: white;
background-image: radial-gradient(#090, #fff, #2a4f32);
}
.gfg {
text-align:center;
font-size:40px;
font-weight:bold;
padding-top:80px;
}
.geeks {
font-size:17px;
text-align:center;
}
</ style >
</ head >
< body >
< div id = "main" >
< div class = "gfg" >lsbin</ div >
< div class = "geeks" >A computer science portal for geeks</ div >
</ div >
</ body >
</ html >输出如下：
径向渐变-不均匀间隔的色标：
CSS允许用户在应用径向渐变功能时改变色标间距。
例子：
<!DOCTYPE html>
< html >
< head >
< title >CSS Gradients</ title >
< style >
#main {
height: 350px;
width: 100%;
background-color: white;
background-image: radial-gradient(#090 40%, #fff, #2a4f32);
}
.gfg {
text-align:center;
font-size:40px;
font-weight:bold;
padding-top:80px;
}
.geeks {
font-size:17px;
text-align:center;
}
</ style >
</ head >
< body >
< div id = "main" >
< div class = "gfg" >lsbin</ div >
< div class = "geeks" >A computer science portal for geeks</ div >
</ div >
</ body >
</ html >输出如下：
