CSS渐变色边框艺术 打造内凹晚霞信笺效果

# 🌈 CSS 每日一练

## 🎨 今日主题：渐变色边框的艺术

**练习目标**：  
用纯CSS实现「内凹渐变边框」效果，让元素像被晚霞浸染的信笺。

```css
.gradient-border {
  padding: 2rem;
  position: relative;
  background: white;
  border-radius: 12px;

  &::after {
    content: ';
    position: absolute;
    top: -3px; left: -3px;
    right: -3px; bottom: -3px;
    z-index: -1;
    background: linear-gradient(
      135deg, 
      #ff9a9e 0%, 
      #fad0c4 50%, 
      #fbc2eb 100%
    );
    border-radius: 15px;
    filter: blur(5px);
  }
}

✨ 美学解析

1. 伪元素魔法：用::after创建独立渲染层
2. 错位美学：-3px的负偏移形成描边效果
3. 柔光滤镜：blur()让渐变如水墨般晕染
4. 空间层次：z-index:-1营造立体信纸效果

🏆 高手挑战

尝试添加@keyframes让渐变如极光流动：

@keyframes aurora {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

📚 延伸阅读

"优秀的CSS像诗歌，用最简练的语法传递最丰富的视觉语言" ——《CSS揭秘》作者Lea Verou