要实现真圆角阴影，图片必须为正方形；border-radius: 50% 在宽高不等时生成椭圆，需用 width/height 等值或 aspect-ratio: 1/1 + object-fit: cover；box-shadow 被裁因父容器 overflow: hidden 或 transform 创建新层叠上下文，可改用 filter: drop-shadow；圆角、边框、阴影需按顺序设置且参数协同，阴影模糊值建议6–12px，偏移量为0更贴合；深色模式下需同步调整 rgba 透明度、边框色值与 border-radius 单位。
直接给 <img> 加 border-radius 和 box-shadow 就能实现圆角阴影，但图片必须是正方形才能真圆，否则会变椭圆；阴影被裁掉、边框不跟手、移动端模糊——这些都不是 bug，是 CSS 渲染规则在起作用。
为什么 border-radius: 50% 没变圆？
根本原因是图片宽高不等，border-radius: 50% 是按各自方向半径算的：水平方向取宽度一半，垂直方向取高度一半。长图+50% = 椭圆。
- 强制设为正方形：
width: 160px; height: 160px;（最稳） - 或用现代方案：
aspect-ratio: 1 / 1;+object-fit: cover;保持比例不拉伸 - 别只写
width: 100%;不设height，此时border-radius: 50%实际无效
box-shadow 被截断或不显示？
阴影不是“浮在上面”的图层，它依附于元素的 border box 边界，并受父容器 overflow: hidden 或 clip-path 直接裁剪。
- 检查图片父容器是否带
overflow: hidden—— 去掉或改成visible - 避免在卡片上加
transform: scale(0.98)类操作，它会创建新层叠上下文，导致阴影渲染区域收缩 - 如果必须用
overflow: hidden（比如防内容溢出），就别依赖box-shadow，改用filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1))，它基于 Alpha 通道，不被裁切
圆角 + 边框 + 阴影怎么配才自然？
三者顺序和参数要协同，否则阴影边缘发虚、边框被盖住、圆角看起来“飘”。
- 先设
border-radius（如12px或50%），再加border和box-shadow，CSS 会自动让后两者跟随圆角轮廓 - 阴影模糊值（第三个参数）别太大：超过
20px容易脱离轮廓，6–12px更贴合 - 想要阴影紧贴边框？把偏移量设为
0：box-shadow: 0 0 8px rgba(0,0,0,0.15); - 加可见边框时，颜色建议比背景略浅（如
#ecf0f1），避免视觉抢戏
真正难的不是写对那几行样式，而是当设计稿里阴影有细微内收、圆角带轻微压感、且要在深色模式下自适应时，box-shadow 的 rgba 透明度、border 的色值、border-radius 的单位（rem 还是 px）得同步响应——这些细节不会报错，但一上线就“差点意思”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
