推荐使用rgba()设置半透明边框，如.example{border:2px solid rgba(0,0,0,0.5);}，其中a为alpha通道控制透明度，取值0-1，兼容性良好但需为旧浏览器提供fallback颜色。
要让CSS元素的边框颜色呈现半透明效果，推荐使用
rgba()
颜色表示法。rgba 中的 "a" 代表 alpha 通道，用于控制透明度，取值范围是 0（完全透明）到 1（完全不透明）。
使用 rgba 设置半透明边框
直接在 border-color 或 border 简写属性中使用 rgba 颜色值即可：
上面代码中：
0, 0, 0
表示黑色（RGB 值）
0.5
是 alpha 值，表示半透明
实际应用示例
比如你想设置一个带半透明红色边框的卡片：
立即学习
“
前端免费学习笔记（深入）
”；
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
这样边框既保留了红色特征，又不会太刺眼，适合用在背景复杂的页面中。
兼容性与注意事项
rgba() 在现代
浏览器
中支持良好，但在一些老旧浏览器（如 IE8 及以下）中不被支持。如需兼容，可考虑提供 fallback 颜色：
基本上就这些，用 rgba 设置半透明边框简单又实用。
.example {
border: 2px solid rgba(0, 0, 0, 0.5); /* 黑色边框，50% 透明度 */
}
.card {
padding: 20px;
border: 3px solid rgba(255, 0, 0, 0.3); /* 浅红半透明边框 */
border-radius: 8px;
}
.fallback-example {
border: 2px solid #000; /* Fallback 黑色边框 */
border-color: rgba(0, 0, 0, 0.3);
}