最简方案是两步：先设display为block或inline-block解决inline导致的边框阴影失效问题，再加border和box-shadow样式；如阴影被截断，需检查父容器overflow并添加padding。

直接加边框和阴影，最简方案就两步：先让图片能正常渲染边框和阴影，再写上基础样式。关键不是堆参数，而是避开默认 inline 带来的坑。

必须设 display 属性

img 默认是 inline 元素，box-shadow 完全不生效，border 上下边还可能被行高“吃掉”。所以第一件事就是改显示方式：

• 用 display: block —— 适合单独展示的图，比如文章配图、头像大图
• 用 display: inline-block —— 适合图文混排，比如文字旁的小图标、列表里的缩略图

一行代码搞定组合效果

加上 display 后，下面这段 CSS 就能同时出边框和阴影，清晰又轻量：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

img {
  display: block;
  border: 2px solid #e0e0e0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

• 边框用浅灰（#e0e0e0），不抢眼，适配多数背景
• 阴影轻微下移 + 柔和模糊，模拟自然光感，透明度仅 10%
• 没加 border-radius 是为了真正“简单”；如需圆角，补上 border-radius: 4px 即可

想更省事？直接内联写

如果只改一张图，不用写 class，直接在 img 标签里加 style：

• 无需额外 CSS 文件或 class 名，复制粘贴就能用
• 适合临时调整、邮件模板、CMS 后台富文本等场景
• 注意单位不能省：必须是 2px，不能写成 2

阴影被截断？快速排查

如果阴影看不见，大概率是父容器“拦住了”：

• 检查父元素是否写了 overflow: hidden（常见于卡片、轮播图容器）
• 给父容器加一点 padding，比如 padding: 4px，给阴影留出空间
• 不建议删 overflow: hidden —— 圆角裁剪等功能会失效

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！