CSS 实现渐变效果小结( linear-gradient线性渐变和 radial-gradient径向渐变)

网页制作 2024/12/23 佚名

3 2 1

线性渐变( linear-gradient )

background-image: 
linear-gradient(to 方向, 开始颜色, 中间颜色1, 中间颜色2, ... , 结束颜色 );

四个方向的组合-八个方向
top, right, bottom, left

角度
90deg

径向渐变( radial-gradient )

background-image: 
radial-gradient(大小 形状 at 方向, 开始颜色, 中间颜色1, 中间颜色2, ..., 结束颜色 );

大小 : 圆半径一个值或者椭圆半长轴和半短轴两个值
百分比 / 像素

形状

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%);

总结

标签：

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

千金楼资源网 Copyright www.htabc.com

评论“CSS 实现渐变效果小结( linear-gradient线性渐变和 radial-gradient径向渐变)”

暂无“CSS 实现渐变效果小结( linear-gradient线性渐变和 radial-gradient径向渐变)”评论...

2024年12月23日