HTML添加边框和阴影的实用方法

box-shadow 的核心优势就是“纯视觉装饰”，不影响文档流。但它容易被误当成 border 的替代品，结果阴影发虚、位置偏移、甚至在元素背后“消失”。

• 基础写法：box-shadow: 2px 2px 4px rgba(0,0,0,0.3) —— 顺序是 h-offset v-offset blur-radius color，缺一不可；blur-radius 为 0 时就是硬边阴影
• 阴影默认画在元素 *外侧*；想往内收，加 inset 关键字：box-shadow: inset 0 0 6px #ccc
• 多个阴影用逗号分隔，但叠加太多会拖慢渲染，尤其在滚动区域里——移动端慎用超过 2 层的 box-shadow

border 和 box-shadow 同时用要注意层叠顺序

两者都画在元素“表面”，但 box-shadow 默认在 border 外层，视觉上没问题；可一旦用了 inset 阴影，就可能和 border 重叠甚至遮挡。

• 想让内阴影压住边框？不行——inset 阴影始终在 border 内侧、content 外侧，无法“盖过” border
• 想让外阴影离边框更近？调小 h-offset 和 v-offset，比如 box-shadow: 0 0 3px rgba(0,0,0,0.2)
• 圆角元素（border-radius）上，border 会随圆角走，box-shadow 默认也跟着圆，但 blur-radius 过大会让阴影边缘“糊开”，看起来不贴合

兼容性差异：IE8 及更老浏览器怎么办

box-shadow 在 IE9+ 才原生支持，IE8 只认 filter 滤镜，而且效果僵硬、性能差；border 倒是全版本都行，但 IE8 不支持 rgba() 边框色。

• 如果必须兼容 IE8，阴影基本放弃，改用背景图或额外伪元素模拟（成本高，不推荐）
• IE8 下 border-color: rgba(0,0,0,0.5) 会退化成黑色实色，要透明边框就得用 border-image（IE10+）或绕路
• 现代项目若已放弃 IE，就别加前缀（如 -webkit-box-shadow），现在所有主流浏览器都支持无前缀 box-shadow

边框和阴影看着简单，真正卡住人的往往是 display 类型、box-sizing、层叠上下文这些隐性条件。调不出来先查 computed style，别急着换方案。

今天关于《HTML添加边框和阴影的实用方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！