HTML卡片排版如何加边框线？轮廓美化方案-html教程-PHP中文网

border属性必须同时指定宽度、样式和颜色三值，缺一不可；否则浏览器默认border-style:none导致边框不显示。

html卡片排版如何加边框线？轮廓美化方案

border 属性必须写全三个值，否则边框不显示

直接写 border: 1px #000; 或 border: solid #000; 都不会出边框——缺了样式（solid）或颜色，浏览器默认 border-style: none，等于没设。正确写法是三者齐全，顺序可变：border: 1px solid #000;、border: solid #000 1px; 都行，但不能省。

常见错误场景：

复制别人代码时漏掉 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，否则边框变双线

如果你用

 做卡片容器（比如商品参数表），直接给 td 和 th 加 border，不加 border-collapse，就会看到每格之间有“缝”或“双线”。这不是 bug，是默认行为（border-collapse: separate）。正确做法：

											
												
												
													DeepBI DHTML 页面生成器
													生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：

- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；  
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；  
- 提及位于 `apps/console/src/featur
												
												下载
												
											
										

给 table 加 border-collapse: collapse;

统一控制边框：只设 th, td { border: 1px solid #ddd; }，别再给 table 单独设 border

如果保留旧式

，务必先重置：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 是否真正参与尺寸计算。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！