渐变

高级

梗概

• 有多种渐变类型
  • 线性渐变
  • 中心渐变

• 需要设定渐变的方向
  • 可以使用角度或者关键词
• 需要设定多个颜色节点以及他们的位置
• 渐变可以叠加, 非常漂亮
• 渐变可以叠加在图片上
• 渐变可以repeat
  • 如果剩余空间没有颜色节点, 就重新填充当前渐变, 直到填满

代码示例

/* 线性渐变示例：从左到右，蓝色渐变到红色 */
.linear-gradient-example {
  background: linear-gradient(to right, blue, red);
}
 
/* 指定角度的线性渐变：45度，从黄色到绿色 */
.angle-gradient-example {
  background: linear-gradient(45deg, yellow, green);
}
 
/* 多个颜色节点及其位置 */
.multicolor-gradient {
  background: linear-gradient(to bottom, red 0%, orange 30%, yellow 60%, green 100%);
}
 
/* 中心渐变（径向渐变）示例：从中心白色到边缘黑色 */
.radial-gradient-example {
  background: radial-gradient(circle, white, black);
}
 
/* 渐变叠加示例：图片上叠加半透明黑色线性渐变 */
.overlay-gradient-on-image {
  background-image: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('example.jpg');
  background-size: cover;
}
 
/* repeat渐变示例：重复的线性渐变条纹 */
.repeat-gradient-example {
  background: repeating-linear-gradient(
    to right,
    lightgray,
    lightgray 10px,
    darkgray 10px,
    darkgray 20px
  );
}

详细

Using CSS gradients - CSS: Cascading Style Sheets | MDN