必须先将img设为inline-block或block，否则border会被line-height遮挡、box-shadow完全无效；再用border+box-shadow组合实现深色边框与自然阴影效果。
直接给 img 加深色边框和阴影，关键不是堆属性，而是解决默认 inline 行为带来的隐藏问题——边框被行高“吃掉”，阴影根本不出。
必须先改 display 模式
img 默认是 inline 元素，box-shadow 对它完全无效，border 上下也会被 line-height 遮住。所以第一步永远是：
-
加
display: inline-block：适合图文混排，保留基线对齐（可配vertical-align: middle） -
或加
display: block：更稳妥，尤其图片独占一行或需居中时
用 border + box-shadow 组合出深色效果
深色不等于纯黑，建议用带透明度的深灰或深蓝，更自然。示例写法：
-
border: 2px solid #333;或border: 2px solid rgba(51, 51, 51, 0.8); -
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);—— 垂直偏移+适度模糊，避免生硬 - 加
border-radius: 6px;让边框和阴影都更柔和（注意：图片本身宽高不等时，先加object-fit: cover防拉伸）
阴影太浅？试试这几个微调点
如果阴影看起来不够“深”或不够立体，别盲目加粗边框，优先调整这些：
-
降低阴影透明度：把
rgba(0,0,0,0.25)改成0.3～0.4，但别超0.5，否则像蒙层 -
加一点扩散值：比如
box-shadow: 0 4px 10px 2px rgba(0,0,0,0.25);，第四个值让阴影略“撑开”，更稳重 -
负扩散慎用：如
-1px可让阴影更贴边，但容易在小尺寸图上显得紧绷，建议先试正数
PNG 透明图想按轮廓投阴影？换 filter
如果图片是 PNG 且有不规则透明边缘（比如头像、图标），box-shadow 仍按矩形盒子投，会显得僵硬。这时用：
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));- 它严格按 Alpha 通道（实际图像形状）投影，边缘自然
- 注意：
drop-shadow不支持inset，也不兼容 IE，现代浏览器没问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
