border-radius: 50%不圆是因为图片宽高不等时按各自方向取半径，长图变椭圆；真圆需宽高相等（如width/height设120px）或用aspect-ratio: 1/1 + object-fit: cover。
响应式图片加圆角，为什么border-radius: 50%不圆？
根本不是代码写错了，是图片宽高不等时border-radius: 50%按各自方向算半径：水平取宽度一半，垂直取高度一半。长图+50% = 椭圆。
要真圆，必须让图片渲染区域是正方形：
- 用
width和height设相等固定值（如120px），最稳，兼容性好 - 用现代方案：
aspect-ratio: 1 / 1+object-fit: cover，保持比例不拉伸，且能响应式缩放 - 别只写
width: 100%却不设height或aspect-ratio，此时border-radius: 50%实际无效
box-shadow在响应式下消失或错位？检查这三处
box-shadow依赖元素的边界框，而响应式缩放会改变这个框的位置和尺寸。常见失效点不是阴影本身，而是父级干扰：
- 父容器有
overflow: hidden——它会裁掉阴影，尤其在小屏上更明显；要么去掉，要么改用filter: drop-shadow() - 用了
transform: scale()或will-change: transform——会创建新层叠上下文，导致阴影渲染区域收缩，移动端尤其易出问题 - 图片设了
max-width: 100%但父容器没设width或max-width——容器塌陷，阴影位置飘移
圆角+阴影+响应式，三者协同的关键参数
不是堆样式就能自然，顺序和数值必须配合：
- 先设
border-radius（如12px或50%），再加box-shadow或filter: drop-shadow()，CSS 才会自动让后者跟随轮廓 -
box-shadow模糊值（第三个参数）别超12px，否则边缘虚化，圆角“发飘”；深色模式下可微调为8px增强清晰度 - 偏移量建议为
0（如0 0 10px rgba(0,0,0,0.12)），贴合更紧；若需立体感，y-offset 控制在4px–6px内即可 - 用
filter: drop-shadow()替代box-shadow时，注意它不支持多层逗号分隔写法，且 Safari 旧版对drop-shadow的 Alpha 渲染略不稳定
深色模式下圆角阴影“差点意思”的真实原因
不会报错，但上线就违和——因为border-radius单位（px还是rem）、box-shadow中rgba()的透明度、边框颜色值，这三者必须同步响应系统偏好。比如：
- 浅色模式用
rgba(0,0,0,0.08)，深色模式就得换成rgba(255,255,255,0.12)，否则阴影“看不见”或“太抢眼” -
border-radius: 12px在小屏上可能显得生硬，换成border-radius: clamp(6px, 1.5vw, 12px)更柔顺 - 如果用了
background模拟内边框，它的颜色也得进@media (prefers-color-scheme: dark)里重定义
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
