🌈 CSS 每日一练

🎨 今日主题：渐变背景的艺术

.gradient-bg {
  background: linear-gradient(
    135deg,
    #ff9a9e 0%,
    #fad0c4 50%,
    #fbc2eb 100%
  );
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

✨ 效果亮点

• 如晚霞般绚丽的渐变色带
• 柔和的圆角与微妙的阴影相得益彰
• 135度角度的动态流动感

🛠️ 实战技巧

1. 多色停靠点：在50%位置添加中间色，创造自然过渡
2. 角度魔法：尝试不同角度（0deg/90deg/180deg）呈现不同视觉效果
3. 混合模式：叠加background-blend-mode: overlay增强层次感

🌟 创意延伸

.rainbow-text {
  background: linear-gradient(
    to right,
    red, orange, yellow, 
    green, blue, indigo, violet
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

这段代码将创造彩虹文字效果，如同被阳光穿透的水晶。

💡 小贴士：使用hsl()色彩模式可以轻松创建协调的渐变色系，如hsl(0, 100%, 50%)到hsl(60, 100%, 50%)的过渡。