border-color: transparent 无效是因为 border-width 默认为0，必须显式设置宽度；transparent仅控制颜色通道，不影响边框存在与否，且需配合 border-style: solid 才能实现三角形等效果。
border-color: transparent 为什么没效果
常见现象是写了 border-color: transparent，但边框还是看得见，或者根本没占位。这不是语法错，而是没配对——border-width 默认为 0，透明色再透明也没用。
- 必须显式设置
border-width（比如1px、2px），否则浏览器不渲染边框盒模型 -
transparent是颜色值，不是“隐藏开关”，它只控制颜色通道，不影响边框是否存在 - 如果父容器有背景色，而你期望“镂空”效果，得确认父级没遮挡，且自身
background-color不是纯白/不透明
用 transparent 做三角形时 border-style 必须是 solid
写 CSS 箭头或下拉小三角时，靠的是三边 transparent + 一边实色，但前提是四边都设了 border-style: solid。换成 dashed 或 dotted，三角直接崩掉。
-
solid才能保证边框交点锐利，形成清晰斜角；其他样式会在端点加圆角或断点，破坏三角结构 - 四个方向的
border-width要不对称（比如只设border-bottom: 10px solid #000，其余三边同宽transparent），否则三角不指向预期方向 - 注意：IE8 及更早版本不支持
transparent作为border-color，若需兼容，得用rgba(0,0,0,0)或 hack 替代
transparent 和 rgba(0,0,0,0) 在边框上表现一致吗
视觉上几乎一样，但行为有细微差别：在某些旧版 Safari 和 Android WebView 中，rgba(0,0,0,0) 可能触发重绘异常，而 transparent 更稳妥；不过现代浏览器两者等效。
-
transparent是关键字，解析快、体积小，推荐优先用 -
rgba(0,0,0,0)属于颜色函数，若项目统一用 rgba 控制所有颜色通道（比如主题色动态切换），可保持一致性 - 别混用：比如
border-color: transparent rgba(0,0,0,0) transparent transparent，容易因浏览器解析顺序出错，尤其在缩写border时
透明边框影响 layout 吗
影响。哪怕颜色是 transparent，只要 border-width > 0，就参与盒模型计算，会撑开元素尺寸、影响 margin 折叠、改变 box-sizing 行为。
立即学习“前端免费学习笔记（深入）”；
- 默认
box-sizing: content-box下，border会加在 width/height 外，容易导致布局溢出 - 想让透明边框“不占空间”，只能设
border-width: 0——但那就真没了，不是“看不见”，是“不存在” - 替代思路：用
outline（不占 layout）或伪元素（完全可控定位），而不是硬扛border的盒模型约束
border-width 和 box-sizing 的联动。一动宽度，就得同步检查 padding 和 max-width 是否还对得上。 
