關於table邊框，設置了border-collapse:collapse之後，各條邊框是怎麼合併的？

01-14

遇到一個邊框需要設置圓角的，然後發現在設置了border-collapse:collapse之後，border-radius:5px就不起作用了，就各種查證，發現這個是css本身就存在的，兩者不能混在一起使用。所以使用了其他的方式，實現了table的圓角。
但是現在就很想知道，table的border和td、th的border是怎麼合併成一條邊框的？
類似於table左上角跟第一個th交界的地方，兩者邊框合併之後，保留的是table的邊框，還是th的邊框呢？如果說保留的是th的邊框，那麼我對第一個th的左上角設置border-radius為什麼依然沒有效果呢？

瀉藥-v-，正好上周五組內分享的時候說到border-collapse的優先順序，w3c關於table的那一節，確實有指示border-collapse: collapse的衝突處理。

直接貼鏈接：Tables

文檔裡面有詳細的兩個例子，很直觀。

這裡我在總結一下：（前提border-collapse: collapse)

1. border-style = [hidden|none]

hidden的優先順序是最高的，當兩個邊框產生聚合時，只要任意一個設置了hidden，則最終結果是不顯示任何邊框；none的優先順序是最低的，只要任意一個設置none，就直接以另一個為結果。

正常情況下border-style: hidden 和 border-style: none 都是不顯示邊框，噹噹border-collapse: collapse的時候就有區別了。

2. border-width不一致的情況下，以border-width大的為主

3. border-style≠[hidden|none] 並且 border-width一致的情況下，以這個優先順序："double", "solid", "dashed", "dotted", "ridge", "outset", "groove", "inset".

4. 當邊框僅僅是color不一樣的時候：就按照dom層級結構來了，子element的border樣式優於父element的border樣式。[cell &> row &> rowgroup &> table]；如果層級結構是兄弟關係，以表格是ltr為例，左邊、上邊優先。

但是呢，特別有意思的是規範沒有指明邊角處corner的collapse邏輯，，so在chrome和firefox下表現不一樣。。
可以在chrome和firefox下分別打開：BQEMea
下圖是兄弟td僅僅是color不一致，然後左邊是chrome，右邊是firefox

另外對於border-radius無效，見文檔：CSS Backgrounds and Borders Module Level 3

《CSS權威指南》第三版360頁：