🌈 CSS 每日一练

🎯 今日重点：clip-path 的魔法裁剪

.artistic-card {
  width: 300px;
  height: 200px;
  background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%);
  clip-path: polygon(
    0% 20%,   /* 左上 */
    50% 0%,   /* 顶点 */
    100% 20%, /* 右上 */
    80% 100%, /* 右下 */
    20% 100%  /* 左下 */
  );
  transition: clip-path 0.5s ease;
}

.artistic-card:hover {
  clip-path: circle(50% at 50% 50%);
}

✨ 效果说明

1. 钻石变圆舞曲：初始为五边形钻石切割效果，悬停时化作完美圆形
2. 渐变流光：粉橙渐变背景让裁剪形状更富层次感
3. 丝滑过渡：通过transition实现形状变化的优雅动画

🧩 实战小技巧

/* 用CSS变量动态控制裁剪路径 */
:root {
  --corner-size: 20%;
}

.dynamic-shape {
  clip-path: inset(
    var(--corner-size) round var(--corner-size)
  );
}

应用场景：

• 创建自适应圆角卡片
• 实现异形图片画廊
• 制作动态背景图案

💡 灵感火花：尝试结合@keyframes让裁剪路径动起来，创造独特的加载动画效果！