Css Block

渐变

线性渐变


<div class="line-gradient"></div>
1
.line-gradient {
    height: 100px;
    background: linear-gradient(90deg, #ff4f4f, #68b1ed);
}
1
2
3
4

圆形渐变


<div class="circle-gradient"></div>
1
.circle-gradient {
    width: 200px;
    height: 200px;
    border-radius: 200px;
    background: conic-gradient(#ff3f3f, #68b1ed, #e3d16b, #3eaf7c, #ff4f4f);
}
1
2
3
4
5
6

彩带


<div class="line-gradient"></div>
1
.line-gradient {
    height: 100px;
    background: repeating-linear-gradient(90deg, #ff4f4f, #ff4f4f 40px, #68b1ed 40px, #68b1ed 80px);
}
1
2
3
4

← 巧用 Content →