实现背景渐变效果
背景渐变之线性渐变 (linear-gradient)
默认属性（从上到下）：background-image: **linear-gradient**(#e66465, #9198e5);
设置方向（从左往右）：background-image: **linear-gradient**(to right,#e66465, #9198e5);
对角方向（从左上往右下）：background-image: **linear-gradient**(to bottom right,#e66465, #9198e5);
设置角度（从左往右）：background-image: **linear-gradient**(45deg,#e66465, #9198e5);
背景渐变之径向渐变 (radial-gradient)
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
| 参数 | 含义 | 333 |
|---|---|---|
| shape | 定义形状（圆形或者椭圆） | ellipse（表示椭圆形）注意：容器宽高不相等 |
| size | 定义大小 | farthest-corner（表示到最远的角落） |
| position | 定义圆心的位置 | center（表示在中心点） |
| start-color | 定义开始的颜色值 | 必填，无默认值 |
| … | 可定义中间多种过渡颜色 | 非必填，看配色需求 |
| last-color | 定义结束的颜色值 | 必填，无默认值 |
案例
background: radial-gradient(128px at 31.7% 40.2%, rgb(225, 200, 239) 21.4%, rgb(163, 225, 233) 57.1%)
background-image: radial-gradient(circle at 10.6% 23.3%, rgb(186, 162, 252) 0%, rgb(176, 248, 242) 72.4%);
想看更更多背景渐变效果参考👇
实现文字渐变效果
第一种
background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);
//为xx元素提供渐变背景
-webkit-background-clip:text;
//使用透明颜色填充文本
-webkit-text-fill-color:transparent;
//用文本剪辑背景 用渐变背景作为颜色填充文本
从上往下渐变
background-image: -webkit-linear-gradient(270deg, #00BBFF 0%, #0086FF 100%);
从左往右渐变
background-image: linear-gradient(270deg, #00BBFF 0%, #0086FF 100%);
想了解更多方法点击下面的链接👇
