用rgba()或hsla()设边框透明色时，border样式（如solid）不可省略，否则声明失效；不可用opacity替代，因其影响整个元素；需兼容IE8时应添加不带alpha的fallback声明。
用 rgba() 设置边框颜色时透明度生效，但要注意 border 样式必须显式声明
直接写 border: 1px solid rgba(0, 0, 0, 0.3); 是有效的，但很多人漏掉 solid（或其它线型），导致边框不显示。CSS 中 border 是复合属性，省略线型会让整个声明失效。
-
border的三要素缺一不可：宽度、样式、颜色 - 只写
border: 1px rgba(0,0,0,0.3);❌ 不生效 - 必须写成
border: 1px solid rgba(0,0,0,0.3);✅ - 也可以拆开写：
border-width: 1px;、border-style: solid;、border-color: rgba(0,0,0,0.3);
hsla() 和 rgba() 在边框中效果完全等价，选哪个纯看颜色管理习惯
两者都支持 alpha 通道，浏览器解析后最终都是 RGBA 值，没有渲染差异。选 hsla() 更适合需要调整色相/饱和度的场景，比如统一改一组边框的色调；rgba() 更适合从设计稿取色后直接粘贴。
border: 2px dashed hsla(200, 50%, 60%, 0.7); border: 2px dashed rgba(100, 180, 220, 0.7); /* 效果一样 */
-
hsla()第三个参数是亮度（lightness），不是明度（brightness），范围是 0%–100% - IE9+ 支持
rgba()，IE9–IE11 不支持hsla()（但现代项目基本不用考虑） - 如果团队用 Sass/Less，
hsla()配合lighten()/darken()更易维护
别用 opacity 代替半透明边框，它会影响整个元素
opacity 作用于整个元素及其子内容，不是仅边框。想只让边框半透而文字保持 100% 不透明，必须用 rgba() 或 hsla() 直接设 border-color。
-
opacity: 0.5;→ 边框、背景、文字全变半透 -
border-color: rgba(0,0,0,0.5);→ 仅边框透明，其余不变 -
伪元素模拟边框（如
::after）再设opacity是绕路，没必要
兼容性与 fallback：老浏览器下 rgba() 边框会退化为纯黑/纯白
IE8 及更早版本不支持 rgba()，会直接忽略整条 border 声明，导致无边框。如果必须兼容，得加一层不带 alpha 的兜底：
border: 1px solid #000; /* IE8 fallback */ border: 1px solid rgba(0, 0, 0, 0.3); /* modern browsers */
- CSS 解析器按顺序读取，后声明的覆盖前一条（IE8 忽略不认识的
rgba()，保留上一行） - 不用
@supports包裹，因为 IE8 不识别该规则，反而导致 fallback 失效 - 现在绝大多数项目可直接放弃 IE8，但若维护遗留系统，这层 fallback 仍需保留
实际开发中，最常踩的坑是忘了写 solid，或者误以为 opacity 能局部控制——这两点比颜色函数选型重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
