渐变 background-image
线性渐变 linear-gradient、径向渐变 radial-gradient、锥形渐变
渐变
CSS 渐变是由浏览器生成的背景图像——线性、径向、锥形三种。
学完本章你将： 掌握 linear-gradient/radial-gradient/conic-gradient。
线性渐变
css
/* 方向 + 颜色 */
.g-1 { background: linear-gradient(to right, red, blue); }
.g-2 { background: linear-gradient(to bottom right, red, yellow); }
.g-3 { background: linear-gradient(45deg, red, orange, yellow); }
/* 色标位置 */
.g-4 { background: linear-gradient(to right, red 20%, yellow 80%); }
/* 硬边渐变 */
.g-5 { background: linear-gradient(to right, red 50%, blue 50%); }径向渐变
css
/* 从中心向外扩散 */
.r-1 { background: radial-gradient(circle, red, yellow, green); }
.r-2 { background: radial-gradient(red 20%, yellow 60%, green 80%); }
/* 指定形状和位置 */
.r-3 { background: radial-gradient(circle at top left, red, yellow); }锥形渐变
css
/* 饼图效果 */
.c-1 { background: conic-gradient(red, yellow, green, blue, red); }
.c-2 { background: conic-gradient(from 45deg, red, yellow, green); }
/* 硬边——饼图扇区 */
.c-3 { background: conic-gradient(red 0% 25%, blue 25% 60%, green 60% 100%); }重复渐变
css
.repeating {
background: repeating-linear-gradient(45deg, #333 0px, #333 10px, #fff 10px, #fff 20px);
/* 条纹效果 */
}