HTML中无独立边框标签，必须用CSS控制；内联style="border:1px solid #000;"需三值齐全；常见失效原因包括颜色与背景同色、overflow:hidden裁剪、inline元素不占布局空间及box-sizing计算偏差。
HTML 本身没有“添加边框”的独立标签或属性，边框必须通过 CSS 控制；直接写 border 在 HTML 标签里（比如 <div border="1">）是过时且无效的。
用 style 写内联 border 最快但不推荐
适合临时调试、单次展示或邮件 HTML 等受限环境。写法简单：style="border: 1px solid #000;"。注意三个值缺一不可：宽度、样式、颜色；只写 border: 1px; 或 border: solid; 都不会生效。
常见错误现象：border 看不见——可能是颜色和背景一样（比如 #fff 在白色背景上），也可能是父容器 overflow: hidden 裁掉了边框。
-
border是简写，等价于同时设border-width、border-style、border-color - 单独控制某一边：用
border-top、border-left等，避免覆盖其他三边已有的设置 - 圆角会“吃掉”边框直角，加
border-radius后边框自动跟随弧度，无需额外处理
border 在外部 CSS 文件里怎么写才不踩坑
这是常规项目该用的方式。关键点不是“会不会写”，而是“写在哪”和“被谁覆盖”。border 容易被重置样式（如 * { border: 0; }）或更高优先级选择器干掉。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
使用场景：组件化开发中，常需要给 .card、.input 这类类名统一加边框，但又不能影响按钮或链接。
- 优先用类选择器（如
.form-input { border: 1px solid #ccc; }），别依赖元素名（如input），否则所有<input>都被套上边框 - 如果边框只在 hover 时出现，记得同时定义
:focus（键盘用户需要），否则可访问性不达标 - 用
border: none清除默认边框时，要确认是否真想清——比如<button>默认有边框，清了可能看起来像没反应
为什么 border 设了却看不见？几个真实原因
不是代码写错，而是渲染逻辑没理清。最常卡在这三处：
- 元素是
display: inline（如<span>），border会存在，但高度/宽度不占布局空间，容易误判为“没显示” - 父容器设置了
font-size: 0或line-height: 0，导致内联元素的border被压缩到视觉不可见 - CSS 里写了
box-sizing: border-box，但你按content-box的逻辑去算尺寸，结果边框挤占了内容宽度，内容被截断或换行
边框本质是绘制在元素盒模型的“边框层”上，它不改变文档流，但会影响尺寸计算和视觉权重。改边框前，先看一眼 box-sizing 和 display 类型——这两个比 border 本身更容易让你花半天找问题。
