边框设置需协同border-style、border-width、border-color三者，单独设color不声明style会导致边框消失；虚线等效果依赖style取值及width配合；border-radius过大易致边框断裂；表格collapse需table与单元格均设border才生效。
border-width、border-style、border-color 怎么一起用才不冲突
直接写 border: 2px solid #333 最省事，但一旦要单独调整某一部分（比如只改颜色、保留原有粗细和线型），就必须确保三者协同。常见错误是只设 border-color 却没设 border-style，结果边框“消失”——因为默认值是 none，颜色再对也渲染不出来。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 单独设置时，
border-style必须显式声明（如dashed、double、groove），否则其他属性无效 -
border-width支持关键词（thin/medium/thick）或具体值（1px、0.1em），注意它不继承 - 四边不同？用
border-top-style、border-right-width等方向性属性，比写border: …更可控
怎么实现虚线、双线、凹凸感这些非实线边框
关键在 border-style 的取值，不是所有值都兼容所有浏览器，尤其老版 IE 对 ridge、inset 渲染异常。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
dashed和dotted看似相似，但dotted是圆点，dashed是短横线；实际长度受border-width影响，宽了点会变成长横线 -
double要求border-width≥ 3px 才能看清两条线，太细会退化成单线 -
groove/ridge/inset/outset依赖系统配色和光照模拟，效果高度依赖border-color与背景色对比，纯黑边框+白底基本看不出凹凸
border-radius 和 border 同时用时的渲染优先级问题
圆角不会“裁掉”边框，但会影响边框的连接方式：当 border-radius 大于 border-width 时，内边框可能被截断，外边框出现缺口——这不是 bug，是 CSS 规范定义的渲染行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 如果要保证边框完整闭合，
border-radius值建议 ≤border-width的 2 倍（例如border: 2px solid #000，border-radius: 4px是安全上限） - 使用
overflow: hidden可强制裁切溢出内容，但无法修复边框自身断裂；真正可靠的做法是用box-shadow模拟边框（box-shadow: 0 0 0 2px #000），它始终跟随圆角 - 多色边框？原生
border不支持，得靠background: linear-gradient()+background-clip: padding-box或伪元素叠加
border-collapse: collapse 在表格里为什么没生效
这个属性只对 <table> 元素本身有效，且前提是表格的 <code>border 是通过 <table>、<code><td>、<code><th> 等元素分别设置的。如果只给 <code><table> 设了 <code>border，而单元格没设，collapse 就没东西可合并。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须同时设置：
table { border-collapse: collapse; }+td, th { border: 1px solid #ccc; } - 避免混用
border-spacing（它只在separate模式下生效），设了collapse后再设border-spacing会被忽略 - 想让表头和表身边框粗细不同？不能只靠
border-collapse，得用:first-child或类名单独控制th的border-bottom
border-style 的隐式依赖、border-radius 与宽度的数值关系、表格中 collapse 的作用范围，这几个地方最容易卡住——调不出来时，先查这三项有没有被默认值悄悄覆盖。
