css制作上下渐变
使用 linear-gradient 创建上下渐变
在 CSS 中，可以通过 background 属性结合 linear-gradient 函数实现上下渐变效果。linear-gradient 默认方向为从上到下，因此无需额外指定方向即可实现垂直渐变。
.element {
background: linear-gradient(to bottom, #起始颜色, #结束颜色);
}示例代码：
.box {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, #ff7e5f, #feb47b);
}自定义渐变角度
若需调整渐变角度，可用角度值替代方向关键词。0deg 表示从下到上，180deg 等同于默认的 to bottom。
.element {
background: linear-gradient(180deg, #ff7e5f, #feb47b);
}多色渐变
在渐变中添加多个颜色节点，可创建更复杂的过渡效果。颜色值后可选百分比或像素值控制过渡位置。
.element {
background: linear-gradient(
to bottom,
#ff7e5f 0%,
#feb47b 50%,
#ffffff 100%
);
}兼容性写法
为兼容旧版浏览器，需添加浏览器前缀。现代浏览器已普遍支持无前缀写法。
.element {
background: -webkit-linear-gradient(top, #ff7e5f, #feb47b);
background: -moz-linear-gradient(top, #ff7e5f, #feb47b);
background: linear-gradient(to bottom, #ff7e5f, #feb47b);
}渐变动画
通过 CSS 动画改变渐变颜色，需结合 @keyframes 和背景位置属性。注意：直接动画渐变需使用其他技术（如伪元素）。
@keyframes gradientShift {
0% { background: linear-gradient(to bottom, #ff7e5f, #feb47b); }
50% { background: linear-gradient(to bottom, #4facfe, #00f2fe); }
100% { background: linear-gradient(to bottom, #a6c1ee, #fbc2eb); }
}
.animated-box {
animation: gradientShift 5s infinite alternate;
}径向渐变替代方案
若需中心扩散效果，可使用 radial-gradient 替代。但方向仍为径向而非垂直。
.element {
background: radial-gradient(circle, #ff7e5f, #feb47b);
}
