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)}
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2023 年 01 月，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读