2024年04月06日 懒猪 前端开发 前端博客 个人博客 网站制作 鹏仔先生 百变鹏仔 HTML CSS javascript JS 共享博客
1. 线性渐变
语法:
background: linear-gradient(tp top, red 0%, yellow 30%, green 45%);
注: 重复的线性渐变写法如下
background: repeating-linear-gradient(red 0%, yellow 10%, green 20%)
重复的线性渐变必须自定义渐变的位置才能出现重复渐变的效果
2. 径向渐变
语法:
background: -webkit-radial-gradient(left top, circle farthest-corner, red 0%, yellow 5%, green 10%);
① 第一个参数代表渐变中心点位置(百分比，像素，固定值)
② 第二个参数代表形状和渐变半径长度
形状默认为椭圆ellipse，设置为circle时为圆形，当宽高相等时，两者形状均为圆形渐变半径长度
closest-side: 半径为离圆心最近的边
closest-cornet: 半径为离圆心最近的角
farthest-side: 半径为离圆心最远的边
farthest-corner: 半径为离圆心最远的角
注: 重复径向渐变写法如下
background: -webkit-repeating-radial-gradient(red 0%, yellow 5%, green 10%);
重复渐变必须自定义渐变位置
本文链接：http://so.lmcjl.com/news/1263/