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

Question

我想将一个表的边框设置为"1px solid black",除了在底部,我想使用一个提供指向链接的指针的图像 - 作为视觉辅助.

当其他边框是常规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

我不这么认为。您可能最好在表格下方添加一个 <DIV> ，给它一个黑色边框，一个固定的背景，以及一些固定的填充或诸如此类的东西（以给它一些大小）。