border 失效主因是 inline 元素行高遮挡或单位缺失，应改用 display: inline-block/block 并写全单位；box-shadow 为纯视觉装饰，inset 阴影在 border 内侧，二者层叠顺序固定，ie8 不支持 box-shadow 和 rgba 边框。
border 属性怎么写才不会失效
直接写 border: 1px solid #000 却没显示？大概率是元素默认 display 类型不支持边框（比如 inline 元素如 <span></span>），或者被其他 CSS 覆盖了。边框不是“加了就一定看得见”，得看渲染上下文。
-
inline元素（如<span></span>、<a></a>）加border会生效，但上下边框可能被行高“吃掉”，视觉上像没加——改用display: inline-block或display: block更稳 - 别漏写单位：
border: 1 solid #000是错的，必须是1px、1em等合法长度值 - 如果用了
box-sizing: border-box，边框会算进宽高里；默认content-box则会撑大元素——调试时注意检查计算后的尺寸是否符合预期
box-shadow 实现阴影但不占布局空间
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，别急着换方案。
