0

我一直在尝试使用 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 。

我怎样才能解决这个问题？

提前致谢！

4

1 回答 1

0

您遇到了样式表的众多怪癖之一。使用普通边框，您可以使用 解决此问题border-collapse: collapse，但这似乎border-image在表格单元格上失败了，至少在某些浏览器中是这样。*

如果我是你，我会通过设计一个::after伪元素而不是<td>元素本身来解决这个问题。

您可以在下面的代码段中看到它的工作原理，但这里是重要部分：

  1. border-collapse: collapse;在<table>
  2. <td>s上所需宽度的透明边框，position: relative;因此伪元素可以绝对定位在
  3. 每个都有一个::after伪元素，并定位以覆盖其及其边框<td>position: absolute;<td>
  4. 每个伪元素的top 和 left ，每行的最后一个伪元素border-image的 right ，底行的伪元素的 bottom 。border-imageborder-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规格说：

'<code>border-image' 属性适用于将 '<code>border-collapse' 设置为 '<code>collapse' 的表格和内联表格的边框。但是，本规范没有定义如何呈现这样的图像边框。特别是，它没有定义图像边框如何与表格边缘的单元格、行和行组的边框交互。

...但是 MDN 说它适用于“所有元素，除了内部表格元素 when border-collapseis collapse”，这似乎是 Chrome 和 Firefox 中的当前行为，至少。

于 2017-03-09T21:26:37.560 回答