线性渐变-色标点区域
根据效果图,补充代码,实现元素的背景颜色在水平方向上发生渐变,其中:
0%-20%处,颜色是红色全透明
<style>
.box{
width: 600px;
height: 400px;
margin: 20px auto 0;
border: 1px solid black;
/* 从左到右 拉线性渐变 */
background-image: linear-gradient(to right,
rgba(255,0,0,0)20%,
rgb(203, 14, 250)50%,
rgba(8, 224, 224, 0.7)90%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
效果
线性渐变-重复渐变
重复的线性渐变
语法:
background:repeating-linear-gradient(color1 length|percentage,color2 length|percentage,……);
<style>
.box{
width: 600px;
height: 400px;
margin: 20px auto 0;
border: 1px solid black;
/* 重复渐变*/
background-image: repeating-linear-gradient(to right,skyblue 0%,yellowgreen 50%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
效果
径向渐变(放射性渐变)
径向渐变由它的中心定义。
为了创建一个径向渐变,你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。
语法:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
样式
<style>
.box{
width: 600px;
height: 400px;
margin: 20px auto 20px;
border: 1px solid black;
}
.box1{
/* circle at left top 径向渐变 的起点在这个容器的左上角 */
background-image: radial-gradient(circle at left top,pink,skyblue,yellowgreen,yellow);
}
.box2{
background-image: radial-gradient(circle at left center,pink,skyblue,yellowgreen,yellow);
}
.box3{
background-image: radial-gradient(circle at left bottom,pink,skyblue,yellowgreen,yellow);
}
.box4{
background-image: radial-gradient(circle at left top,pink,skyblue,yellowgreen,yellow);
}
.box5{
background-image: radial-gradient(circle at center center,pink,skyblue,yellowgreen,yellow);
}
.box6{
background-image: radial-gradient(circle at center bottom,pink,skyblue,yellowgreen,yellow);
}
.box7{
background-image: radial-gradient(circle at right top,pink,skyblue,yellowgreen,yellow);
}
.box8{
background-image: radial-gradient(circle at right center,pink,skyblue,yellowgreen,yellow);
}
.box9{
background-image: radial-gradient(circle at right bottom,pink,skyblue,yellowgreen,yellow);
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>
<div class="box box8"></div>
<div class="box box9"></div>
</body>
效果
特别注意: shape size at position, 这几个值的设置,都是在 逗号前面的。 每个设置之间用 空格 间隔。