径向渐变--跟着李南江学编程

一、径向渐变和线性渐变

线性渐变：默认从上至下扩散

background: linear-gradient(red,yellow);

径向渐变：默认从中心向四周扩散

background: radial-gradient(red,yellow);

image.png

二、径向渐变的扩散方向 at+方向

比较线性渐变 在渐变颜色前是 to+方向

background: linear-gradient(to right,red,yellow)

径向渐变 在渐变颜色前是 at+方向

改变径向渐变扩散的方向就是改变 中心点的位置

background: radial-gradient(at left,red,yellow);

中心点在left 左

background: radial-gradient(at top,red,yellow);

中心点在top 上

image.png

background: radial-gradient(at top right,red,yellow);

中心点在top rigth 右上

image.png

通过对比线性渐变可用具体的角度来控制渐变方向

background: linear-gradient(45deg,red,yellow);

径向渐变也可用具体的数值来控制扩散的方向，用具体的数值标明中心值

background: radial-gradient(at 100px 100px,red,yellow);

image.png

三、扩散范围

线性渐变可以指定纯色和渐变的范围

background: linear-gradient(to top,red 100px,yellow);
或
background: linear-gradient(to top,red 20%,yellow);

径向渐变也可以指定扩散的范围

background: radial-gradient(100px at 100px 100px,red,yellow);

扩散范围+at+扩散位置
若要同时指定扩散的范围和扩散的位置，扩散的范围必须写在at的前面

我正在跟着江哥学编程,更多前端+区块链课程: www.it666.com