纯css画冰淇淋需用border-radius+transform skew实现甜筒曲率与锥形，box-shadow叠加模拟奶油蓬松感；须规避safari旧版clip-path渲染断裂及radial-gradient抗锯齿发虚问题。
纯 CSS 画冰淇淋不是靠“堆技巧”，而是靠 border-radius 控制曲率 + transform: skew() 或 clip-path 做锥形甜筒 + 多层 box-shadow 模拟奶油蓬松感。真能跑通的方案，必须避开 clip-path 在 Safari 旧版本中的渲染断裂，也得绕开用 radial-gradient 做球体时因抗锯齿导致的边缘发虚问题。
用 border-radius 和 transform 组合出甜筒本体
甜筒不能只靠一个矩形加圆角——那样底部太钝、顶部太宽。实际要分两段：上窄下宽的梯形轮廓 + 底部微翘的弧度。
- 用一个
<div class="cone">，设 <code>width: 0; height: 0;，再通过border-left/border-right和border-bottom构成三角形基础 - 给
border-bottom加border-radius: 12px 12px 0 0;模拟甜筒卷边（注意：仅对带 border 的元素生效） - 最后用
transform: skewX(-15deg);微调角度，让视觉更自然；别用rotate()，否则阴影会跟着歪 - 主球体：一个
<div class="scoop">，<code>width: 60px; height: 60px; border-radius: 50%; - 加三层阴影：
box-shadow: 0 -4px 8px -2px rgba(255,255,255,0.7), 0 -8px 16px -4px rgba(255,255,255,0.4), 0 -12px 24px -6px rgba(255,255,255,0.2); - 阴影方向统一向上（负
y），模拟高光从顶部打下来的体积感 - 替代方案：用两个重叠的
<div>，一个做斜向渐变背景（<code>background: linear-gradient(135deg, #d4a76a, #b8860b)），另一个用overflow: hidden和transform: scaleY(0.8) skewY(-10deg)压扁裁切 - 关键点：裁切容器必须设
position: relative，被裁内容设position: absolute，否则 Safari 会忽略裁切
奶油球用 box-shadow 叠加比 radial-gradient 更稳
radial-gradient(circle at 30% 30%, #fff, #f9f0e6) 看起来干净，但 Chrome 和 Firefox 对渐变边缘的抗锯齿处理不一致，放大后容易出现像素级断层。而多层 box-shadow 是硬件加速的，且兼容性覆盖 IE11+。
避免 clip-path 在 iOS 15.4 以下崩溃
网上很多教程直接用 clip-path: polygon(50% 0%, 0% 100%, 100% 100%) 剪出甜筒形状，但在 iOS 15.4 及更早的 Safari 中，只要页面有滚动或动画，该元素就可能白屏或错位。这不是 bug，是 WebKit 对复杂 clip-path 的合成策略缺陷。
真正难的不是画出形状，而是让每一层在缩放、Retina 屏、深色模式切换时不崩——比如 box-shadow 的模糊值要随 devicePixelRatio 动态调整，而 border-radius 的像素值在 2x 屏下得翻倍才不显锯齿。这些细节不会报错，但用户一眼就能感觉“假”。
