css渐变色

一、属性介绍

属性值：

• linear-gradient ( 线性渐变 )
• radial-gradient ( 径向渐变 )
• repeating-linear-gradient （ 重复线性 ）
• repeating-radial-gradient （ 重复径向 ）

【MDN地址】

二、使用演示

2.1 线性渐变 （linear-gradient ）

2.1.1 上下渐变

• background: linear-gradient( #e66465, #9198e5); // 默认方向 为 上 =》下

2.1.2 右下、左上渐变

• background: linear-gradient(to left top,#e66465, #9198e5); // 改变渐变方向 为 右下角 =》 左上角

2.1.3 角度渐变

• background: linear-gradient(45deg,#e66465, #9198e5); // 角度渐变 旋转角度为 45deg

2.1.4 渐变范围控制

• background: linear-gradient(45deg,#e66465 30%, #9198e5); // 角度渐变 旋转角度为 45deg，但是两种颜色的占比却为 3 : 7。在每种颜色的后面跟一个百分比的值，即代表在该百分比的位置发生颜色变化

2.2 径向渐变（radial-gradient）

2.3.真实举例

csdn博客的创作中心按钮

/* 样式即为： */
background: linear-gradient(92deg,#ffba40 0,#ff503e 37%,#ff2