周三下午改样式，产品经理突然说"这个表格边框太丑了"。你盯着屏幕上的双线条发呆——明明只写了一句border: 1px solid black，怎么就成了双层夹心饼干？
问题出在浏览器默认的边框叠加机制。table、th、td各自独立渲染边框，相邻单元格的边框并排站立，视觉上就成了双倍粗细。解法很简单：加一行border-collapse: collapse，让相邻边框合并成单线。这是前端面试里常考的"知道就是知道"型知识点，没踩过坑的人很难第一时间想到。
合并后的边框玩起花样来更顺手。想要那种"看起来没边框，其实有结构"的极简风？把边框设成白色（跟背景同色），再给单元格填个底色，视觉上就只剩色块之间的呼吸感。代码长这样：
table, th, td { border: 1px solid white; border-collapse: collapse; }
th, td { background-color: #96D4D4; }
圆角边框是另一块重灾区。直接给table加border-radius: 10px，四个角确实弯了，但单元格还是直角，衔接处像被狗啃过。想要整体圆润的效果，得把table从选择器里踢出去，只给th和td加圆角。这时候边框合并的好处又显出来了——相邻单元格的圆角自然衔接，不会出现锯齿。
线型选择比大多数人想象的丰富。border-style支持10种值：除了常见的solid（实线）、dotted（点线）、dashed（虚线），还有double（双线）、groove（凹槽）、ridge（凸脊）、inset（内嵌）、outset（外凸）。后四种模拟3D浮雕效果，在扁平化设计当道的今天已经很少见，但遇到需要复古质感或打印表格的场景，它们依然是现成方案。
颜色控制用border-color，支持十六进制、RGB、颜色名。一个容易忽略的细节：如果不显式设置，边框颜色默认继承当前元素的color属性。这意味着如果你给表格文字设了品牌色，边框会跟着变色——有时候是惊喜，有时候是灾难。
最后提一嘴兼容性。这些属性从IE8时代就基本稳定，现代浏览器更是毫无压力。真正要担心的是设计稿里的"1px细线"在视网膜屏上发虚，这时候可能需要0.5px配合transform: scale()的 hack，那就是另一个故事了。
热门跟贴