CSS 完成渐变色实际效果小结( linear

线形渐变色( linear-gradient )

background-image: 
linear-gradient(to 方位, 刚开始色调, 正中间色调1, 正中间色调2, ... , 完毕色调 );

4个方位的组成-8个方位
top, right, bottom, left

角度
90deg

轴向渐变色( radial-gradient )

background-image: 
radial-gradient(尺寸 样子 at 方位, 刚开始色调, 正中间色调1, 正中间色调2, ..., 完毕色调 );

尺寸 : 圆半径1个值 或 椭圆半长轴和半短轴两个值
百分比 / 像素

样子

circle
ellipse

方位
百分比 / 像素

closest-side/closest-corner/farthest-side/farthest-corner

background-image: radial-gradient(800px circle at 50% 50%, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);

总结

到此这篇有关CSS 完成渐变色实际效果小结( linear-gradient线形渐变色 和 radial-gradient轴向渐变色)的文章内容就详细介绍到这了,更多有关css 渐变色实际效果內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！