北京
周三下午改樣式，產(chǎn)品經(jīng)理突然說(shuō)"這個(gè)表格邊框太丑了"。你盯著屏幕上的雙線條發(fā)呆——明明只寫(xiě)了一句border: 1px solid black，怎么就成了雙層夾心餅干？
問(wèn)題出在瀏覽器默認(rèn)的邊框疊加機(jī)制。table、th、td各自獨(dú)立渲染邊框，相鄰單元格的邊框并排站立，視覺(jué)上就成了雙倍粗細(xì)。解法很簡(jiǎn)單：加一行border-collapse: collapse，讓相鄰邊框合并成單線。這是前端面試?yán)锍？嫉?知道就是知道"型知識(shí)點(diǎn)，沒(méi)踩過(guò)坑的人很難第一時(shí)間想到。
合并后的邊框玩起花樣來(lái)更順手。想要那種"看起來(lái)沒(méi)邊框，其實(shí)有結(jié)構(gòu)"的極簡(jiǎn)風(fēng)？把邊框設(shè)成白色（跟背景同色），再給單元格填個(gè)底色，視覺(jué)上就只剩色塊之間的呼吸感。代碼長(zhǎng)這樣：
table, th, td { border: 1px solid white; border-collapse: collapse; }
th, td { background-color: #96D4D4; }
圓角邊框是另一塊重災(zāi)區(qū)。直接給table加border-radius: 10px，四個(gè)角確實(shí)彎了，但單元格還是直角，銜接處像被狗啃過(guò)。想要整體圓潤(rùn)的效果，得把table從選擇器里踢出去，只給th和td加圓角。這時(shí)候邊框合并的好處又顯出來(lái)了——相鄰單元格的圓角自然銜接，不會(huì)出現(xiàn)鋸齒。
線型選擇比大多數(shù)人想象的豐富。border-style支持10種值：除了常見(jiàn)的solid（實(shí)線）、dotted（點(diǎn)線）、dashed（虛線），還有double（雙線）、groove（凹槽）、ridge（凸脊）、inset（內(nèi)嵌）、outset（外凸）。后四種模擬3D浮雕效果，在扁平化設(shè)計(jì)當(dāng)?shù)赖慕裉煲呀?jīng)很少見(jiàn)，但遇到需要復(fù)古質(zhì)感或打印表格的場(chǎng)景，它們依然是現(xiàn)成方案。
顏色控制用border-color，支持十六進(jìn)制、RGB、顏色名。一個(gè)容易忽略的細(xì)節(jié)：如果不顯式設(shè)置，邊框顏色默認(rèn)繼承當(dāng)前元素的color屬性。這意味著如果你給表格文字設(shè)了品牌色，邊框會(huì)跟著變色——有時(shí)候是驚喜，有時(shí)候是災(zāi)難。
最后提一嘴兼容性。這些屬性從IE8時(shí)代就基本穩(wěn)定，現(xiàn)代瀏覽器更是毫無(wú)壓力。真正要擔(dān)心的是設(shè)計(jì)稿里的"1px細(xì)線"在視網(wǎng)膜屏上發(fā)虛，這時(shí)候可能需要0.5px配合transform: scale()的 hack，那就是另一個(gè)故事了。
特別聲明：以上內(nèi)容(如有圖片或視頻亦包括在內(nèi))為自媒體平臺(tái)“網(wǎng)易號(hào)”用戶上傳并發(fā)布，本平臺(tái)僅提供信息存儲(chǔ)服務(wù)。
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.
