css制作蛋糕

使用CSS绘制蛋糕

通过CSS的伪元素、边框、阴影等属性可以绘制一个简单的蛋糕图形。以下是一个基础实现方案：

<div class="cake"></div>

.cake {
  width: 200px;
  height: 100px;
  background: #f9c5c1;
  border-radius: 10px 10px 0 0;
  position: relative;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.cake::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background: #ff9aa2;
  border-radius: 10px 10px 0 0;
}

.cake::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 10%;
  width: 80%;
  height: 15px;
  background: #e75480;
  border-radius: 0 0 5px 5px;
}

添加蜡烛装饰

通过绝对定位添加蜡烛元素：

.candle {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 40px;
  background: #fff;
  z-index: 2;
}

.flame {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 20px;
  background: #ffde7d;
  border-radius: 50% 50% 20% 20%;
  box-shadow: 0 0 10px #ff9f1c;
  animation: flicker 1s infinite alternate;
}

@keyframes flicker {
  0% { transform: translateX(-50%) scale(1); }
  100% { transform: translateX(-50%) scale(1.1); }
}

制作分层蛋糕

通过多个div元素创建多层蛋糕效果：

<div class="layer bottom"></div>
<div class="layer middle"></div>
<div class="layer top"></div>

.layer {
  position: relative;
  margin: 0 auto;
}

.bottom {
  width: 300px;
  height: 80px;
  background: #f8b195;
}

.middle {
  width: 250px;
  height: 70px;
  background: #f67280;
}

.top {
  width: 200px;
  height: 60px;
  background: #c06c84;
}

添加糖霜效果

使用径向渐变创建糖霜纹理：

.top {
  background: 
    radial-gradient(circle at 30% 30%, white 5%, transparent 5%),
    radial-gradient(circle at 70% 70%, white 5%, transparent 5%),
    radial-gradient(circle at 50% 20%, white 5%, transparent 5%),
    #c06c84;
}

响应式调整

通过媒体查询适应不同屏幕尺寸：

@media (max-width: 600px) {
  .bottom { width: 200px; height: 60px; }
  .middle { width: 160px; height: 50px; }
  .top { width: 120px; height: 40px; }
}

这些CSS技巧可以组合使用，通过调整颜色、尺寸和位置参数，可以创建各种风格的蛋糕视觉效果。动画属性可以让蜡烛火焰更生动，过渡效果可以实现交互时的状态变化。