应使用rgba()或hsla()直接设置border-color的alpha值，而非opacity或filter，以免影响元素内内容；rgba()和hsla()的第四个参数为0–1的小数，代表透明度；需注意父容器背景可能遮挡透明边框效果。
直接用 rgba() 设置边框颜色，别碰 opacity
给边框加透明度，最稳妥的方式是把 border-color 设为 rgba() 值，而不是给整个元素加 opacity。后者会让内容（文字、子元素）也变透明，通常不是你想要的。
比如要一个半透明白色边框：
border: 2px solid rgba(255, 255, 255, 0.6);
rgba() 的第四个参数是 alpha 值，范围是 0（全透明）到 1（不透明），支持小数，比如 0.3、0.85 都合法。
hsla() 同样可用，适合基于色相调整的场景
如果你习惯用色相（Hue）方式调色，hsla() 是等效替代方案，语法一致，只是前三个参数代表色相、饱和度、明度。
立即学习“前端免费学习笔记（深入）”；
例如浅灰蓝边框带 70% 不透明度：
border: 1px solid hsla(200, 15%, 60%, 0.7);
注意：不要混用 hsla() 和透明度单位（如 %），alpha 参数只接受 0–1 小数。
别用 opacity 或 filter: opacity() 控制边框透明度
这两个属性作用于整个元素渲染层，会连带让文字、背景、子节点一起变淡，无法单独控制边框。
-
opacity: 0.5→ 整个盒子（含文字）变一半透明 -
filter: opacity(0.5)→ 同样全局生效，且可能触发重绘、影响性能 - 即使只写
border相关样式，它们也无济于事
兼容性提醒：IE8 及更早版本不支持 rgba()/hsla()
如果必须兼容 IE8，得回退到 PNG 边框图或用 filter: progid:DXImageTransform.Microsoft.gradient 模拟（不推荐，维护成本高）。现代项目基本可忽略 IE8，放心用 rgba()。
真正容易被忽略的是：边框透明 ≠ 背景透明。如果父容器有背景色，而你只设了透明边框，视觉上可能看不出变化——记得检查父级背景是否遮挡了你的边框效果。
