HTML5中边框透明需用CSS实现：优先用rgba()/hsla()精确控透明度（如rgba(0,0,0,0)），或transparent关键字保留布局占位；禁用rgb()、opacity、visibility及border:none，因它们或无效或影响整体元素。
HTML5 本身没有“设置透明边框”的独立语法，边框透明与否完全由 CSS 控制。所谓“HTML5 设置”，实际是用 border 相关 CSS 属性配合透明色值实现。
用 rgba() 或 hsla() 指定带 alpha 通道的边框色
这是最直接、语义最清晰的方式，能精确控制透明度，且兼容现代浏览器（IE9+）。
-
rgba(0, 0, 0, 0)表示完全透明的黑色边框（视觉上不可见，但边框仍占据空间） -
rgba(255, 0, 0, 0.3)是半透红边框，适合叠加在复杂背景上保留层次感 - 避免用
rgb()，它不支持 alpha，写成rgb(0,0,0,0)会被当作无效声明而忽略 - 注意：若父容器有
background-clip: padding-box（默认），透明边框下仍可能透出父背景，需检查层叠上下文
用 transparent 关键字最简捷
这是专为“透明但保留边框结构”设计的 CSS 颜色值，无需计算数值，兼容性极好（IE8+）。
div {
border: 2px solid transparent;
}
- 等效于
border-color: transparent，适用于需要保留border-width和border-style但隐藏颜色的场景 - 和
border: none本质不同：none会移除边框盒模型中的边框占位，而transparent保留占位，不影响布局流 - 不能用于
border-image的切片颜色，transparent在那里行为不一致，建议改用rgba(0,0,0,0)
别误用 opacity 或 visibility
这两个属性作用于整个元素，不是仅边框，强行使用会导致意料外的副作用。
立即学习“前端免费学习笔记（深入）”；
-
opacity: 0会让整个元素（含内容、背景、边框）完全不可见且不可交互，且会触发新层叠上下文 -
visibility: hidden同样隐藏全部内容，且保留原始空间，但边框也不再渲染——它根本没被画出来，不是“透明” - 想只让边框消失又不扰动布局？用
border-color: transparent；想彻底移除边框结构？用border: 0或border: none
真正容易被忽略的是边框透明后的盒模型表现：即使颜色透明，border-width 仍参与 box-sizing 计算。如果用 border: 1px solid transparent 却没看到预期留白，大概率是忘了它仍在 padding 和 content 之间占了 1px —— 这不是 bug，是 CSS 规范本意。
