css渐变色
一、属性介绍
属性值:
- linear-gradient ( 线性渐变 )
- radial-gradient ( 径向渐变 )
- repeating-linear-gradient ( 重复线性 )
- repeating-radial-gradient ( 重复径向 )
二、使用演示
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