CSS渐变色介绍和用法详细示例 _CSS渐变

【CSS渐变色介绍和用法详细示例】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 >

输出如下：