北京
周三下午改樣式，產品經理突然說"這個表格邊框太丑了"。你盯著屏幕上的雙線條發呆——明明只寫了一句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，那就是另一個故事了。
特別聲明：以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布，本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
