Appearance
渐变效果（丰富背景，替代图片，提升加载速度）
19.1 线性渐变（linear-gradient）
定义
线性渐变是从一种颜色平滑过渡到另一种颜色的效果，可以设置水平、垂直或倾斜方向。
语法
css
background: linear-gradient(方向, 颜色1, 颜色2, ...);方向设置
- 角度：如
45deg、90deg - 关键词：
to right（水平）、to bottom（垂直）、to top right（倾斜）
示例
css
/* 水平渐变 */
.horizontal-gradient {
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
}
/* 垂直渐变 */
.vertical-gradient {
background: linear-gradient(to bottom, #a8edea, #fed6e3);
}
/* 倾斜渐变 */
.angle-gradient {
background: linear-gradient(45deg, #667eea, #764ba2);
}19.2 径向渐变（radial-gradient）
定义
径向渐变是从中心向四周过渡的颜色效果，可以设置为圆形或椭圆形。
语法
css
background: radial-gradient(形状 大小, 颜色1, 颜色2, ...);形状和大小
- 形状：
circle（圆形）、ellipse（椭圆形，默认） - 大小：
closest-side、farthest-side、closest-corner、farthest-corner
示例
css
/* 圆形渐变 */
.circle-gradient {
background: radial-gradient(circle, #ff6b6b, #4ecdc4);
}
/* 椭圆形渐变 */
.ellipse-gradient {
background: radial-gradient(ellipse, #a8edea, #fed6e3);
}
/* 带位置的渐变 */
.position-gradient {
background: radial-gradient(circle at top left, #667eea, #764ba2);
}19.3 渐变叠加和多颜色渐变
多颜色渐变
可以在渐变中使用多个颜色，创建更丰富的效果。
css
/* 多颜色线性渐变 */
.multi-gradient {
background: linear-gradient(to right, #ff6b6b, #4ecdc4, #45b7d1);
}
/* 多颜色径向渐变 */
.multi-radial {
background: radial-gradient(circle, #ff6b6b, #4ecdc4, #45b7d1);
}渐变叠加
可以通过 background 属性叠加多个渐变。
css
/* 渐变叠加 */
.overlay-gradient {
background:
linear-gradient(45deg, rgba(255,107,107,0.8), rgba(78,205,196,0.8)),
url('background.jpg');
background-size: cover;
}19.4 实战：制作渐变按钮、渐变背景、渐变文字
实战目标
创建渐变按钮、渐变背景和渐变文字效果。
实战步骤
- 创建HTML文件：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS渐变效果实战</title>
<style>
/* 在这里添加CSS样式 */
</style>
</head>
<body>
<div class="container">
<h1>CSS渐变效果实战</h1>
<!-- 渐变按钮 -->
<section class="demo-section">
<h2>渐变按钮</h2>
<button class="gradient-btn btn-1">按钮1</button>
<button class="gradient-btn btn-2">按钮2</button>
<button class="gradient-btn btn-3">按钮3</button>
</section>
<!-- 渐变背景 -->
<section class="demo-section gradient-bg">
<h2>渐变背景</h2>
<p>这是一个带有渐变背景的区域。</p>
</section>
<!-- 渐变文字 -->
<section class="demo-section">
<h2>渐变文字</h2>
<h3 class="gradient-text">渐变文字效果</h3>
</section>
</div>
</body>
</html>- 添加CSS样式：
css
/* 重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", Arial, sans-serif;
background-color: #f5f5f5;
padding: 50px 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 40px;
}
.demo-section {
margin-bottom: 40px;
padding: 30px;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.demo-section h2 {
color: #555;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #ddd;
}
/* 渐变按钮 */
.gradient-btn {
padding: 12px 30px;
border: none;
border-radius: 25px;
color: white;
font-size: 16px;
cursor: pointer;
margin: 10px;
transition: transform 0.3s;
}
.gradient-btn:hover {
transform: translateY(-3px);
}
.btn-1 {
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
}
.btn-2 {
background: linear-gradient(to right, #667eea, #764ba2);
}
.btn-3 {
background: linear-gradient(to right, #f093fb, #f5576c);
}
/* 渐变背景 */
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.gradient-bg h2 {
color: white;
border-bottom-color: rgba(255, 255, 255, 0.3);
}
.gradient-bg p {
font-size: 18px;
line-height: 1.6;
}
/* 渐变文字 */
.gradient-text {
font-size: 32px;
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}- 运行页面：在浏览器中打开文件，观察效果
预期效果
- 渐变按钮：三个不同颜色的渐变按钮，悬停时有上浮效果
- 渐变背景：带有渐变背景的区域，文字为白色
- 渐变文字：文字本身显示渐变效果