首页网站技术正文

CSS linear-gradient() 函数，渐变设置，元素颜色渐变线性设置

2022-05-29 525

CSS linear-gradient() 函数，渐变设置，元素颜色渐变线性设置

实例

CSS linear-gradient() 函数，渐变设置，元素颜色渐变线性设置

这个线性渐变从顶部开始。它从红色开始，过渡到黄色，然后过渡到蓝色：

#grad {
  background-image: linear-gradient(red, yellow, blue);
}

定义和用法

linear-gradient() 函数把线性渐变设置为背景图像。

如需创建线性渐变，您必须至少定义两个色标。色标是您希望在其间呈现平滑过渡的颜色。您还可以在渐变效果中设置起点和方向（或角度）。

线性渐变实例：

CSS 语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

值	描述
direction	定义渐变效果的起点和方向（或角度）。
color-stop1, color-stop2,...	色标是您要在其间呈现平滑过渡的颜色。该值由一个颜色值组成，其后是一个可选的停止位置（0％到 100％之间的百分比值，或沿渐变轴的长度值）。

线性渐变 - 从上到下

此线性渐变从顶部开始。它从红色开始，过渡到黄色，然后过渡到蓝色：

注释：Internet Explorer 9 以及更早的版本不支持渐变。

原文链接：https://77isp.com/post/1008.html

=========================================

https://77isp.com/ 为 “云服务器技术网” 唯一官方服务平台，请勿相信其他任何渠道。