缺口圆形通过::before和::after伪元素叠加遮挡实现，主圆完整，伪元素设为同背景色的小圆并精确定位，配合border-radius:50%、aspect-ratio:1及transform居中偏移，确保视觉缺口精准锐利。
缺口圆形的实现原理：用 ::before 和 ::after 拼出“缺角”
纯 CSS 画缺口圆，本质不是“挖掉一块”，而是用两个半圆叠加遮挡——主容器是完整圆，再用伪元素盖住局部，露出背景形成视觉缺口。关键在定位精度和 z-index 层级控制。
- 缺口必须用绝对定位的伪元素（
::before或::after）覆盖在圆上，不能依赖clip-path（iOS Safari 旧版不稳，且动画支持差） - 伪元素本身要设成小圆或矩形，颜色与父容器背景一致，才能“遮住”原圆、制造缺口效果
- 缺口位置靠
top/right精调，误差超过 2px 就会露白边或错位
border-radius 必须为 50%，且宽高严格相等
哪怕只是 width: 200px; height: 199px;，border-radius: 50% 也会渲染成椭圆，缺口对称性直接崩掉。优惠券边缘要求视觉平衡，这点没商量。
- 推荐用
aspect-ratio: 1配合width控制尺寸，比写死height更安全 - 如果容器有内边距或 border，必须用
box-sizing: border-box，否则实际宽高超预期 - 不要用
em或rem设宽高——字体缩放时圆会变形
缺口位置偏移量怎么算：用 transform: translate() 而非 top/left
直接写 top: 10px; left: 10px 在不同尺寸下无法等比缩放，一换屏幕就错位。用 transform 才能保持缺口相对圆心的比例关系。
- 缺口圆伪元素建议设为
width: 24px; height: 24px;，然后用transform: translate(-50%, -50%)居中到目标点 - 目标点坐标用
calc(50% + 20px)这类表达式，比如右上缺口：top: calc(50% - 20px); right: calc(50% - 20px); - 别忘了给伪元素加
border-radius: 50%，否则缺口边缘是方的
真机上缺口发虚？检查 backface-visibility 和像素对齐
部分安卓 WebView 和 iOS Safari 渲染亚像素时，伪元素边缘会模糊，看起来像缺口“没切干净”。这不是代码错，是渲染策略问题。
立即学习“前端免费学习笔记（深入）”；
- 给主容器加
backface-visibility: hidden，强制 GPU 加速，多数情况能锐化边缘 - 缺口伪元素的
width/height建议用偶数像素（如24px），避免 0.5px 渲染抖动 - 如果父容器用了
scale()缩放，缺口伪元素必须单独scale(1)重置，否则缩放会放大模糊
缺口最难调的永远不是形状，是不同设备下那 1px 的对齐偏差——它不会报错，但用户一眼就觉着“不对劲”。
