国旗应使用 background 和 aspect-ratio 实现响应式纯色底纹与精准比例，避免伪元素错位；中国旗用 #de2939 底色加 clip-path 五角星，美国旗用 repeating-linear-gradient 条纹，日本旗用红底白圆；须禁用图片、统一用相对单位并适配 Retina。
用 background 和 aspect-ratio 快速铺出国旗底色
多数国旗本质是几个纯色矩形的组合，硬套 ::before/::after 伪元素定位反而容易错位。直接用 background 渐变或分层更稳。aspect-ratio: 3 / 2 是常见国旗比例（如中国、美国），必须设，否则盒子被内容撑变形，颜色块对不齐。
常见错误：只写 width 和 height 固定像素，响应式一缩就糊；或漏掉 background-repeat: no-repeat，导致星条纹重复错乱。
- 中国国旗用
background: #de2939铺底，五角星用伪元素单独画 - 美国国旗建议用
linear-gradient叠七道红白条纹，再用background-image叠左上角蓝底+白色星群 - 日本国旗最简单：
background: #bc002d+ 一个居中border-radius: 50%的白色圆
五角星怎么用 ::before 精准定位而不失真
五角星不是 SVG，别用 transform: rotate() 拼——角度稍偏，尖角就歪。标准做法是用 clip-path: polygon() 描点，或者更兼容的：一个正方形 div + transform: rotate(18deg) 套五次，再用 overflow: hidden 截出星形。但实际项目里，clip-path 更可控。
容易踩的坑：position: absolute 的五角星父容器没设 position: relative，星直接飞到页面顶部；或用 % 定位时，父容器没设宽高，百分比失效。
- 中国国旗大星位置固定：距左
15%、距上15%，用left: 15%; top: 15% - 小星旋转角度不同，每个都要单独设
transform: rotate(某deg)，不能共用类名偷懒 - 所有星必须加
z-index: 2，否则可能被底色盖住
box-shadow 模拟星条旗条纹时的像素级对齐问题
美国国旗的13道条纹，用 box-shadow 复制比写13个 div 轻量，但阴影默认模糊半径为0，一旦设了 blur 就毛边。正确做法是只用 inset 阴影 + spread 控制高度，例如：box-shadow: inset 0 -1px 0 0 #fff, inset 0 -2px 0 0 #de2939……这样逐行叠加。
性能影响明显：超过20层 box-shadow 在低端安卓机上会掉帧；IE 完全不支持多层 inset 阴影，得降级为 background-image: linear-gradient()。
- 每道条纹高度必须是整数像素（如
24px），避免 subpixel 渲染导致虚边 - 用
background-size配合linear-gradient更稳妥，例如：background: repeating-linear-gradient(to bottom, #de2939 0, #de2939 24px, #fff 24px, #fff 48px) - 注意
background-origin: border-box，否则边框会影响条纹起始位置
响应式国旗在 Retina 屏上发虚怎么办
核心是避免用 px 写死尺寸。所有长度单位改用 em 或 rem，配合根字体缩放；五角星用 vw 控制大小，确保在不同分辨率下都锐利。最关键的是：禁用图片缩放，所有图形必须纯 CSS 构成——一旦引入 background-image: url(...)，DPR=2 时必然模糊。
容易被忽略的一点：Chrome 开发者工具里“Toggle device toolbar”模拟手机屏时，默认开启“Emulate DPR”，但真实 iOS 设备上 1px 边框仍可能渲染为 0.5 物理像素，导致看不见。解决方案是用 transform: scaleY(0.5) 配合 transform-origin 微调。
- 国旗容器加
image-rendering: -webkit-optimize-contrast强制清晰渲染 - 所有
border改用outline，它不参与盒模型计算，也不受缩放影响 - 测试必看真机：模拟器里的“清晰”可能是假象
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
