Question

我想将表格的边框设置为“1px纯黑色”，除了在底部，我想使用一个提供链接指针的图像 - 作为视觉辅助。

当其他边框是常规css时，是否可以将图像设置为底部边框。

Answer 1

尝试将表放在<div class="myTableContainer"></div>内，然后：

.myTableContainer{
  padding-bottom: 1px;
  background: url(myBorderImage.png) bottom left;
}

这应该适用于所有浏览器。

Answer 2

CSS3增加了对border-image的支持。您可以在http://www.w3.org/TR/css3-background/#border-images找到更多信息。此时（2012年初），由于缺乏所有IE版本的支持，使用它可能不安全。要跟踪何时可以安全使用，您可以访问http://caniuse.com/#search=border-image。模拟边框图像样式的一种方法是使用定位的背景图像。例如，要模拟顶部边框：

div
{
  background-image: url('topBorder.gif');
  background-position: top;
  background-repeat: repeat-x;
}

Answer 3

我不这么认为。你可能最好添加一个＆lt; DIV＆gt;在桌子下面，给它一个黑色边框，一个固定的背景，以及一些固定的填充物或什么（给它一些尺寸）。

Answer 4

一种解决方案是使用css中的背景图像为元素设置样式，然后在CSS中指定背景的偏移量。背景可以从元素的边缘（例如div或li元素）之外突出。这可以用于许多不同的效果，一个是使用纯css的投影外观。

这里有一些具体细节：

http://www.alistapart.com/articles/cssdropshadows/

Answer 5

现在有 CSS3 和border-image属性，但它仍不适用于所有浏览器。

好的，我们就此话题提出W3Schools link。

Answer 6

没有。为什么不为此目的尝试另一个表行？

Answer 7

尝试在表格下面放置一下，然后设置他的风格，如

.bottomborder {
  height:1px;
  background-image:url("yourImage.png");
}

应该运作良好。

编辑：当然边框顶部，左边，右边为你的桌子“固体1px黑色”

Answer 8

您可以像下边框一样设置边框：

border-top:1px solid black;
border-right:1px solid black;
border-left:1px solid black;

对于底部边框，您可以将图像设置为行的背景。

如何在CSS中使用图像作为边框

8 个答案: