纯CSS可实现披萨剪影：用border-radius或clip-path组合饼底，radial-gradient双层渐变模拟奶酪拉丝感，absolute定位小圆/三角作配料，需relative父容器、百分比坐标及响应式clamp尺寸。
用 border-radius 和 clip-path 拼出披萨轮廓，别真画饼
纯 CSS 画不出带纹理的热腾腾披萨，但能做出可识别、可缩放、无图的披萨剪影或抽象示意。核心不是“画”，而是“组合形状”：饼底用圆角矩形或圆形，奶酪用径向渐变，配料靠绝对定位的小圆/三角模拟。真实项目里，clip-path: polygon() 可切出不规则饼边，但兼容性要注意——Safari 15.4+、Chrome 102+ 才稳定支持多点 polygon；旧版得退回到 border-radius: 50% + 阴影伪造厚度。
radial-gradient 做奶酪层，参数调错就变煎蛋
披萨奶酪的关键是“拉丝感+不均匀感”，不能只用单层纯黄。推荐双层渐变叠加：
background: radial-gradient(circle at 30% 40%, #f9d71c 0%, #e6b81e 60%, transparent 70%), radial-gradient(circle at 70% 60%, #ffd700 0%, #f9c515 50%, transparent 60%);
常见翻车点：
-
circle at x y的坐标是相对于元素自身的，不是视口；设成at 120% 120%就直接溢出看不见 - 百分比半径写成
80px会导致响应式失效；一律用百分比或em - 两层渐变没加逗号分隔 → 浏览器只认第一个，第二层被静默丢弃
用 position: absolute 摆配料，别碰 transform: rotate()
香肠片、橄榄、青椒这些，用 <span class="topping"></span> 就够了。每个 topping 设固定宽高 + border-radius 控制形状（圆片/椭圆/三角），再用 top/left 精确定位。重点：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative，否则absolute会相对 body 定位 - 避免用
transform: rotate(25deg)模拟斜放香肠——旋转后 hit-area 仍按原矩形算，点击检测错位；改用clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%)切斜条更可靠 - 配料太多时，z-index 别全设一样，奶酪层（渐变背景）默认在最下，配料元素 z-index 从 2 开始递增，避免遮挡
响应式披萨要重算 clip-path 百分比，不是简单 width: 100%
当容器宽度变化，用 clip-path: polygon(10% 5%, 90% 5%, ...) 写死的坐标会失真。正确做法：
- 给披萨容器设
aspect-ratio: 1 / 1，保证始终是正圆 - 所有
clip-path坐标统一用百分比，且基于容器自身宽高（不是视口） - 小屏下配料尺寸用
clamp(4px, 1.2vw, 8px)，比单纯em更稳 - 真要适配极小屏（
CSS 画披萨最难的不是形状，是让每一块“香肠”在不同缩放比例下都看起来像随手撒上去的，而不是用尺子量过。手动调几个关键点的 top/left 值，比写一堆计算函数更直接有效。
