CSS3 颜色渐变

最新推荐文章于 2024-03-08 22:24:47 发布

原创最新推荐文章于 2024-03-08 22:24:47 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用CSS创建线性渐变背景，包括设置颜色渐变方向及定义多种颜色过渡效果。通过具体实例代码展示了从右下角到左上角的渐变背景实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

颜色渐变 gradient

分为线性渐变 linear 和径向渐变 radial

线性渐变：

参数：（第一个参数省略时，默认为“180deg”，等同于“to bottom”）

第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。

代码示例：background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

效果图：

完整代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>Gradient</title>
<style type="text/css">

p {
  width: 400px;
  height: 150px;
  line-height: 150px;
  text-align:center;
  color: #000;
  font-size:24px;
  background-image:linear-gradient(to  left,red,orange,yellow,green,blue,indigo,violet);
} 
</style>
</head> 
<body>
　　<p>右下角向左上角的线性渐变背景</p>
</body>
</html>