如何将CSS边框图像用于3x3表，因此每2个单元格之间只有1个边框

Question

我一直在尝试边框图像属性，并试图制作一个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. border-collapse: collapse;上的CC_5
2. <td> S和position: relative;上所需宽度的透明边界，因此可以将伪元素绝对放置在
中
3. 用position: absolute;上的每个CC_11上的::after伪元素，并定位为覆盖<td>及其边框
4. 每个伪元素上的顶部和左border-image s，每行的最后一个伪元素上的右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规格说：

" border-image"属性适用于将" border-collapse"设置为" collapse"的表和内联表的边界。但是，此规范并未定义如何呈现这种图像边框。特别是，它没有定义图像边界如何与表边缘处的单元，行和行组的边界相互作用。

...但MDN表示，它适用于"所有元素，除了border-collapse为collapse时内部表元素，但至少是Chrome和Firefox中的当前行为。