CSS 的 border 属性必须写在样式规则中才生效，可置于内联 style、 块或外部 CSS 文件；需确保元素有尺寸且声明完整的 border-style（如 solid），并注意 box-sizing 影响布局。
border 属性写在哪个 CSS 位置才生效
HTML5 本身不提供边框布局能力，所有边框控制都依赖 CSS。如果写了 关键点：边框样式必须作用于有尺寸的元素。空的 可以，而且经常需要分开控制。比如只想改底边样式，或响应式下仅调整边框粗细。 分开写的常见场景： 立即学习“前端免费学习笔记（深入）”； 注意： 默认 解决方案： 当需要「不占布局空间的边框」（比如焦点高亮、调试轮廓）， 但要注意： 调试时临时加 border 属性。
border 也看不见。
width/height、或 padding / min-height
border: 1px; —— 缺少样式关键词（如 solid）会导致整个声明无效 块或外部 CSS 文件中border-width / border-style / border-color 能不能分开写
border-bottom: 2px dashed #333; —— 单边设置，不影响左右上border-top-width: 0; 配合 border: 1px solid #ccc; 实现“去掉上边框”border-image 替代纯色边框时，必须先设 border-style（否则图像不渲染）border-style 是必要项。只写 border-width 和 border-color 不会显示边框。box-sizing: border-box 对边框布局的实际影响
box-sizing: content-box 下，给一个 width: 200px 的元素加 border: 10px solid red，实际占用宽度是 220px（内容区 200px + 左右边框各 10px）。这常导致布局错位，尤其在 flex 或 grid 容器中。
*, *::before, *::after { box-sizing: border-box; }div.card { width: 300px; border: 2px solid #e0e0e0; box-sizing: border-box; } —— 此时边框被“挤进” 300px 内部，内容区自动收缩）默认表现类似 border-box，但不可靠，建议显式声明
用 outline 替代 border 的边界情况
outline 比 border 更合适。它不会触发重排，也不受 box-sizing 影响。
outline 不支持单边设置（没有 outline-top）outline-offset 可控制距离，负值会让轮廓向内偏移（可能遮盖内容）outline-radius 支持不稳定，圆角建议仍用 border-radius + border
outline: 2px dashed blue; 查看元素真实尺寸，比 border 更安全。
