border属性必须同时指定宽度、样式和颜色三部分，仅设color无效；需重置body默认margin并配合box-sizing:border-box避免布局异常；推荐用语义化CSS类统一管理边框样式。
给 body 或其他元素加边框时，border 属性必须写全
直接在 index.html 里用内联样式或 <style> 设置边框，最常漏掉的是「宽度」和「样式」。只写 border-color: red 是无效的——浏览器默认 border-style 是 none，颜色再对也看不见边框。
正确写法必须包含三部分：宽度、样式、颜色。例如：
border: 2px solid #333;
-
2px：不能省略单位，0可以不带单位但语义是「无边框」 -
solid：必须显式指定，可选值还有dashed、dotted、double等 -
#333：支持命名色（red）、十六进制、rgb/rgba，但别用中文名（如「红色」）
想让整个页面有外边框？别只改 body，注意默认 margin 和 box-sizing
给 body 加 border 后可能发现边框离窗口边缘有空隙，或者内容被挤出。这是因为：
- 浏览器默认给
body设了margin: 8px（Chrome/Firefox），得先重置：body { margin: 0; } -
border默认不计入宽高，如果元素设置了固定宽高（比如width: 100%），加上边框会溢出。加box-sizing: border-box才能让边框包含在尺寸内 - 若要全窗口贴边显示边框，更稳妥是套一层
<div id="wrapper">，然后对它设position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: ...
用 CSS 类控制不同区域边框，避免重复写 border 值
多个元素需要不同边框时，硬编码每处 border 容易错乱。建议抽成类名，比如：
立即学习“前端免费学习笔记（深入）”；
.border-thin { border: 1px solid #ccc; }<br>.border-highlight { border: 2px solid #007bff; }<br>.border-dashed { border: 1px dashed #999; }
这样 HTML 里只需：<div class="border-highlight">...。好处是：
- 改颜色或粗细只需动一处 CSS，不用遍历所有
style属性 - 语义清晰，
border-highlight比border: 2px solid #007bff更容易理解用途 - 支持用
border-top、border-left等单独控制某一边，类名也能对应（如border-bottom-dashed）
调试边框看不见？优先检查这三件事
边框没显示出来，八成不是语法错，而是被其他规则覆盖或隐藏了：
- 用浏览器开发者工具（F12）点中元素，看「Computed」面板里
border是否为none或0px；展开后能看到哪条规则把它覆盖了 - 检查父容器有没有
overflow: hidden，边框可能被裁掉 - 确认元素本身有尺寸：空的
<div></div>高度为 0，边框自然不可见；加min-height: 1px或内容/内边距就能看到
边框相关的坑大多藏在默认行为和层叠规则里，而不是属性本身难写。
