如何將CSS邊框圖像用於3x3表格，以便每2個單元格之間只有1個邊框？

Question

我一直在試驗border-image屬性，並且試圖製作一個3x3網格，外部邊框和每個單元格之間的邊框。問題是，如果我使用的邊界圖像財產上的表格單元格像這樣：

td { 
    border: 10px solid black; 
    border-image-source: url(https://mdn.mozillademos.org/files/6009/border-image-2.png); 
    border-image-slice: 33% 33% 33% 33%; 
    border-image-repeat: round round; 
    border-image-outset: 0px 0px 0px 0px; 
} 

有結束是每個單元之間的兩個邊界。如果不清楚我的意思，請參閱http://codepen.io/katieyang/pen/RpKpNW?editors=0100。

我該如何解決這個問題？

在此先感謝！

Answer 1

你已經遇到了造型表的許多怪癖之一。與普通的邊框，您可以通過使用border-collapse: collapse解決這個問題，但似乎對錶格單元格擊敗border-image，在某些瀏覽器至少*

如果我是你，我會通過造型的::after僞元素解決這個而不是<td>元素本身。

你可以看到它在下面的代碼段工作，但這裏是重要的部分：

1. 在<table>
2. border-collapse: collapse;所需的寬度對<td>個透明邊框和position: relative;這樣一個僞元素可以絕對定位在
3. ::after僞元素每個<td>與position: absolute;和定位覆蓋<td>及其邊界
4. 頂部和左側border-image在每個僞元素上，右側border-image在每行的最後一個僞元素上，底部border-image在底部行的僞元素上。

在片段中，我添加了一些:hover樣式來顯示僞元素及其邊界的位置。

table { 
 
    border-collapse: collapse; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: #ccc; 
 
    text-align: center; 
 
    color: white; 
 
} 
 

 
td { 
 
    position: relative; 
 
    border: 10px solid transparent; 
 
} 
 

 
td::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -10px; 
 
    left: -10px; 
 
    width: 100%; 
 
    height: 100%; 
 
    
 
    border: 10px solid blue; 
 
    border-image-source: url(//mdn.mozillademos.org/files/6009/border-image-2.png); 
 
    border-image-slice: 33%; 
 
    border-image-repeat: round; 
 
    border-image-outset: 0; 
 
} 
 

 
td:hover::after { 
 
    /* for demonstration only */ 
 
    border-image: none; 
 
    background-color: rgba(0,0,255,0.33); 
 
} 
 

 
td:not(:last-child)::after { 
 
    border-right: 0; 
 
} 
 

 
tr:not(:last-child) td::after { 
 
    border-bottom: 0; 
 
}

<table class="box"> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>4</td> 
 
    <td>5</td> 
 
    <td>6</td> 
 
    </tr> 
 
    <tr> 
 
    <td>7</td> 
 
    <td>8</td> 
 
    <td>9</td> 
 
    </tr> 
 
</table>

*當前border-image spec說：

的「border-image」屬性適用於表和內聯表的邊界已經「border-collapse」設置爲「collapse」。但是，這個規範並沒有定義如何渲染這樣的圖像邊框。特別是，它沒有定義圖像邊界如何與表格邊緣處的單元格，行和行組的邊界交互。

...但MDN說，它適用於「所有元素，除了內部表元素時border-collapse是collapse」，這似乎是在Chrome和Firefox當前的行爲，至少。