Css-linear-gradient()

397 阅读1分钟

示例:

background-image: linear-gradient(#fecc4c, #ffac33); 会创建一个从上到下的线性渐变背景,颜色从**#fecc4c**(明亮的橙黄色)渐变到 #ffac33(更深的橙色)。这种渐变设计可以为页面带来温暖的色调,适合营造明快的氛围。

可选优化和调整

  • 调整渐变角度:可以设置渐变的角度。例如,从左到右的渐变可用 linear-gradient(to right, #fecc4c, #ffac33);
  • 多色渐变:可以在渐变中添加更多颜色,例如 linear-gradient(#fecc4c, #ffac33, #ff8c00);
  • 透明渐变:在颜色代码后添加透明度,例如 linear-gradient(rgba(254, 204, 76, 0.8), rgba(255, 172, 51, 0.8));

这个渐变会使页面显得活泼,适合做按钮、标题栏或者背景。