table邊框設定了border-collapse:collapse後面各條邊框如何合併的？

遇到一個邊框需要設定圓角的，然後發現在設定了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的衝突處理。

文件裡面有詳細的兩個例子，很直覺。

這裡我在總結一下：(前提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

以上是table邊框設定了border-collapse:collapse後面各條邊框如何合併的？的詳細內容。更多資訊請關注PHP中文網其他相關文章！