border属性必须同时指定宽度、样式和颜色三值，缺一不可；否则浏览器默认border-style:none导致边框不显示。
border 属性必须写全三个值，否则边框不显示
直接写 border: 1px #000; 或 border: solid #000; 都不会出边框——缺了样式（solid）或颜色，浏览器默认 border-style: none，等于没设。正确写法是三者齐全，顺序可变：border: 1px solid #000;、border: solid #000 1px; 都行，但不能省。
常见错误场景：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 复制别人代码时漏掉
solid，只留border: 1px #ccc; - 用 CSS 变量时写成
border: 1px solid var(--border-color);，但变量未定义，结果降级为none - 在媒体查询里覆盖边框，只写了
border-width: 2px;，没重设border-style
卡片圆角+阴影+边框要协同设置，别让 border-radius 被 box-shadow 盖住
border-radius 控制的是边框本身的圆角，而 box-shadow 是额外绘制的层。如果阴影模糊值（blur）太大，会把圆角“吃掉”，看起来像直角。解决方法是：
- 先确保
border-radius值合理（如8px），再配box-shadow: 0 2px 8px rgba(0,0,0,0.1); - 若需强立体感，用两层无模糊阴影模拟高光/背光：
box-shadow: 2px 2px 0 #e0e0e0, 1px 1px 0 #999; - 避免对
img直接加border-radius和box-shadow：它默认是inline，得先加display: block;或display: inline-block;，否则圆角和阴影可能不生效
表格型卡片用 border-collapse: collapse，否则边框变双线
如果你用 <table> 做卡片容器（比如商品参数表），直接给 <code>td 和 th 加 border，不加 border-collapse，就会看到每格之间有“缝”或“双线”。这不是 bug，是默认行为（border-collapse: separate）。
立即学习“前端免费学习笔记（深入）”；
正确做法：
- 给
table加border-collapse: collapse; - 统一控制边框：只设
th, td { border: 1px solid #ddd; }，别再给table单独设border - 如果保留旧式
<table border="1">，务必先重置：<code>table[border] { border: none; }，否则 CSS 边框和 HTML 属性会冲突outline 不是边框，焦点蓝线别误删
点击卡片内按钮或输入框时突然出现一圈蓝线，那是
outline，不是border。它不占布局空间、不响应border-radius、也不能单边控制。容易踩的坑：
- 想“去掉边框”却写了
border: none;，蓝线还在——得单独处理outline: none; - 直接全局写
* { outline: none; }，会破坏键盘导航可访问性 - 安全替代方案：
outline: none;配合&:focus-visible { outline: 2px solid #007bff; }，或改用box-shadow: 0 0 0 2px rgba(0,123,255,0.25);模拟焦点环
边框看着简单，但涉及渲染层、文档流、可访问性三层逻辑。最容易被忽略的是：border-style 必须显式声明，以及 outline 和 border 的职责边界。写完记得用键盘 Tab 测试焦点路径，再用 devtools 的 layout 面板确认 box-sizing 和 border 是否真正参与尺寸计算。
- 想“去掉边框”却写了
