用 CSS 的 box-shadow 和 border-radius 即可实现图片外阴影与圆角效果，无需额外标签或 JS；基础写法为给 img 标签添加 border-radius 和 box-shadow 样式，支持单层或多层阴影、overflow 修复及 hover 动效适配不同场景。

用 CSS 的 box-shadow 和 border-radius 就能轻松实现图片的外阴影 + 圆角效果，不需要额外标签或 JS。

基础写法：一行代码搞定

直接给 <img> 标签加样式：

<img src="photo.jpg" alt="示例图" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">

说明：
– border-radius: 12px 控制圆角大小，数值越大越圆润（设为 50% 就是正圆）；
– box-shadow: 0 4px 12px rgba(0,0,0,0.15) 表示：水平偏移 0、垂直偏移 4px、模糊半径 12px、透明黑阴影；
– rgba 中的 0.15 是透明度，避免阴影太重，推荐 0.08～0.2 之间更自然。

让阴影更柔和、有层次感

单层阴影有时显得单薄，可以叠加多层阴影提升立体感：

• 写法示例：box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 6px 16px rgba(0,0,0,0.12);
• 第一层：近距轻影（模拟贴图感）
• 第二层：稍远扩散影（增强空间感）
• 两层搭配比单层更真实，适合卡片式布局或头像展示

配合 overflow 防止圆角失效

如果图片父容器有 padding 或设置了 overflow: hidden，但图片仍不圆角？常见原因：

立即学习“前端免费学习笔记（深入）”；

• 图片被包裹在 <div> 里，但只给 div 加了 border-radius，没给 img 加 → 必须给 img 本身加 border-radius
• 父容器用了 overflow: hidden，但 img 没设 display: block → 行内元素可能因底部留白“溢出”圆角，加 display: block 或 vertical-align: top 即可修复

小技巧：圆角+阴影适配不同场景

• 头像类：border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.1)
• 卡片图/封面图：border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.12)
• 悬浮增强效果：加 hover 过渡：transition: all 0.2s ease; hover: { transform: translateY(-2px); box-shadow: ... }