CSS linear-gradient() 函数

cssweb developmentfront end technology更新于 2024/11/5 19:24:17

linear-gradient() 用于将线性渐变定义为背景图像减号

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

以上设置起点和方向，并使用颜色停止位来渲染平滑过渡。

示例

现在让我们看一个实现 linear-gradient() 的示例 −

<!DOCTYPE html>
<html>
<head>
<style>
div {
   text-align: justify;
   text-justify: inter-word;
   color: white;
   background-image: linear-gradient(to bottom right, red , blue);
   position: absolute;
   right: 90px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div>
</body>
</html>

输出

示例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-image: linear-gradient(to right, yellow,orange,yellow,green,blue,indigo,violet);
}
.demo {
   text-decoration: overline;
   text-decoration-color: yellow;
   font-size: 1.3em;
}
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>