菜鸟教程
教程 css tutorial

渐变

CSS 渐变可以实现颜色的平滑过渡，主要有线性渐变（linear-gradient）和径向渐变（radial-gradient）两种。

1. 线性渐变（linear-gradient）

沿着指定方向或角度，颜色逐渐变化：

css 
background: linear-gradient(to right, red, yellow);
background: linear-gradient(45deg, blue, green);

2. 径向渐变（radial-gradient）

从中心向外辐射状的颜色变化：

css 
background: radial-gradient(circle, red, yellow, green);

背景属性示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>渐变示例</title>
<style>
.linear-gradient-1 {
height: 100px;
background: linear-gradient(to right, red, yellow);
margin-bottom: 20px;
border: 1px solid #ccc;
}


.linear-gradient-2 {
  height: 100px;
  background: linear-gradient(45deg, blue, green);
  margin-bottom: 20px;
  border: 1px solid #ccc;
}

.radial-gradient {
  height: 100px;
  background: radial-gradient(circle, red, yellow, green);
  border: 1px solid #ccc;
}



</style>
</head>


<body>
<div class="linear-gradient-1"></div>
<div class="linear-gradient-2"></div>
<div class="radial-gradient"></div>
</body>


</html>

相关内容