核心知识
渐变：由浏览器生成的背景图像
无需图片文件，也能用颜色的连续变化装饰同一张活动卡片。
.poster {
background-color: #e8f4ef;
background-image: linear-gradient(
to right, #e8f4ef, #fff1d9
);
}从函数名到参数
linear-gradient()：线性渐变，生成的是图像，不是颜色值。
to right：从左向右；随后依次写起始色与结束色。
可写方向角：90deg 向右，180deg 向下。
浅绿 #e8f4ef → 浅金 #fff1d9；正文仍用深色，保证可读性。
background 与 background-color 的区别
.poster { background-image: linear-gradient(to right, teal, gold); }
.poster { background: lightyellow; }background 是简写属性；未写出的相关背景属性会恢复初始值。第二条使 background-image 变为 none，原渐变不再显示。
若第二条改成 background-color: lightyellow，就只改底色，保留渐变。完全不透明的渐变会遮住其下的底色。
拓展：色标与多层背景
background-image:
linear-gradient(to right, transparent, #fff1d9),
url("stage-background.svg");逗号分开多层背景，先写的一层在上面；这里透明部分能透出下方图片。色标可写位置，如 teal 0%, gold 100%；并不是改变元素本身的尺寸。
展开完整代码与运行演示
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>黄梅戏分享会</title>
<style>
.poster {
background-color: #e8f4ef;
background-image: linear-gradient(
to right, #e8f4ef, #fff1d9
);
}
.poster {
padding: 24px;
color: #183347;
}
</style>
</head>
<body>
<article class="poster">
<h1>黄梅戏分享会</h1>
<p>周三下午 · A208</p>
</article>
</body>
</html>