HTML5不提供边框语法，必须用CSS设置；border需完整包含粗细、样式、颜色三要素，缺一不可，且数值必须带单位（如1px），否则视为0；表格边框需设border-collapse: collapse才显示连续实线；box-sizing影响边框是否计入宽高。
HTML5 本身不提供设置边框的语法，边框必须用 CSS 控制；直接写 border 但没配单位或值类型，浏览器会忽略——这是新手最常卡住的地方。
border 属性必须写全三要素：粗细、样式、颜色
只写 border: 1px solid; 或 border: #000; 都无效。CSS 的 border 是简写属性，缺一不可：
-
border-width（如1px、thin、medium） -
border-style（solid是实线，其他还有dashed、dotted等） -
border-color（如#333、rgb(0,0,0)、transparent）
推荐新手用完整写法：border: 1px solid #000;。别省略 solid，也别漏掉单位 px（em、rem 也可，但初学建议统一用 px）。
单位不能省，1 和 1px 完全不同
CSS 中数值不带单位默认为 0（除了 line-height 等少数例外）。所以 border: 1 solid black; 实际等价于 border: 0 solid black;——边框根本不会显示。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
常见错误写法与修正：
- ❌
border: 2 solid red;→ ✅border: 2px solid red; - ❌
border: thin solid;→ ✅border: thin solid #000;（thin是合法关键字，但颜色不能缺） - ❌ 写成 HTML 属性：
<div border="1"> → ✅ 必须用 <code>style或外部 CSS只设某一边？用方向性子属性更安全
想只给下边加实线？别用
border-bottom: 1px solid #ccc;以外的方式“模拟”，比如靠padding+background。那样在缩放、高对比度模式或打印时容易失效。方向性写法明确、语义清晰、兼容性好：
border-top: 1px solid #eee;border-right: 2px solid #999;border-bottom: 1px solid #333;-
border-left: 0;（显式清空左边，避免继承或层叠干扰）
注意：
border-left: none;和border-left: 0;效果一致，但0更轻量，且不会触发重绘 bug（极少数旧版 Safari）。border-collapse 影响表格边框显示
如果对
<table> 设了 <code>border却看不到实线，大概率是border-collapse在作怪。默认值是separate，此时单元格边框独立，可能被间隙隔开；设成collapse才能合并成连续实线：table { border-collapse: collapse; } td, th { border: 1px solid #000; }这个属性只对表格生效，不影响 div 等普通元素。漏掉它，哪怕每个
<td> 都写了 <code>border，也可能显示成虚断线或双线。真正容易被忽略的点：边框是否参与盒模型计算。默认
box-sizing: content-box下，border会额外增加元素总宽高；改用box-sizing: border-box后，设定的width就包含边框了——这点在做响应式布局时几乎必然踩坑。
