CSS 03 线性渐变、径向渐变与重复性渐变

linear-gradient( [ || ,]? , [,]* )

< angle >:用角度指定渐变方向或者角度

to left

to right

to top

to bottom

.ceng{

width:260px;
height:200px;
border:1px solid black;

background-image:linear-gradient(orange,green);    /*从橘红色向绿色渐变,从上到下*/
background-image:linear-gradient(to top,orange,green);    /*从橘红色向绿色渐变,从下到上*/
background-image:linear-gradient(to left,orange 30%,green 60%, red 100%);    /*从橘红色向绿色渐变,从左到右 30% 、60%、100%渐变,也可以变为30px,60px,100px这些类似的数字 */
background-image:linear-gradient(180edg,orange,green);    /*从橘红色向绿色渐变,角度旋转*/

}
径向渐变
CSS 03 线性渐变、径向渐变与重复性渐变插图

radio

.ceng{

width:100px;
height:100px;
border:1px solid black;
border-radius: 50%;
margin:10px;
margin:left;

}
.circle{

background-image: radial-gradient(circle at center orange,green);      //默认circle at center,也就是不用写
background-image: radial-gradient(20px circle at center,orange,green);    //从中间渐变20px,百分数不行
background-image: radial-gradient(circle at center,orange,green,red);  //多色彩渐变,也可以加上方向和长度

}

.ellipse{

background-image: radial-gradient(ellipse at center,orange,green);
background-image: radial-gradient(ellipse at right,orange,green);     //右渐变
background-image: radial-gradient(ellipse at top,orange,green);       //从顶渐变
background-image: radial-gradient(ellipse at top right,orange,green);    //从右上渐变
background-image: radial-gradient(50px 20px ellipse at center,orange,green);    //从x方向渐变50px,y方向20px,百分数不行

background-image: radial-gradient(ellipse at center,orange,green,red);  //多色彩渐变,也可以加上方向和长度

}
重复性渐变
CSS 03 线性渐变、径向渐变与重复性渐变插图1

.linear{

width:300px;
height:300px;
margin:20px auto;
background-image:repeating-linear-gradient(red 0px,green 40px,orange 80px)    //重复渐变,要设置色标值

}

.circle{

width:300px;
height:300px;
margin:20px auto;
border-radius:50%;
background-image:repeating-linear-gradient(red 0px,green 30px,orange 40px)

}

原创文章:https://www.qqhhs.com,作者:起航®,如若转载,请注明出处:https://www.qqhhs.com/34.html

版权声明:本站提供的一切软件、教程和内容信息仅限用于学习和研究目的,请于下载的24小时内删除;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!

Like (0)
Donate 受君之赠,荣幸之至 受君之赠,荣幸之至 受君之赠,荣幸之至 受君之赠,荣幸之至
Previous 2023年1月10日
Next 2023年1月10日

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们

qhhl

QQ-175142992024110802215838同号

SHARE
TOP
“人们不愿意相信,一个土匪的名字叫牧之”