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

Question

我想将表格的边框设置为"1px solid black"，除了底部外，我希望使用一个图像作为指向链接的视觉提示。

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

- Ankur

Answer 1

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

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

这应该在所有浏览器中都能很好地工作。

- warpech

Answer 2

CSS3新增了对border-image的支持。您可以在http://www.w3.org/TR/css3-background/#border-images上找到更多信息。目前（2012年早期）由于IE的不同版本不完全支持，因此可能还不能安全使用。要跟踪何时可以安全地使用，您可以访问http://caniuse.com/#search=border-image。模拟border-image样式的一种方法是使用定位的background-image。例如，要模拟顶部边框：

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

- Brian Hasden

Answer 3

我认为不是这样的。你最好在表格下方添加一个<DIV>，给它一个黑色边框、一个固定的背景和一些固定的填充或其他东西（以给它一些大小）。

- exclsr

Answer 4

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

以下是一些具体细节：

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

- Gordon Potter

Answer 5

现在有CSS3和border-image属性，但仍然不能在所有浏览器上工作。

好的，让这个话题有一个W3Schools链接。

- loler

Answer 6

尝试在您的表格下放置一个

，然后设置它的样式如下：

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

应该能正常工作。

编辑：当然，对于您的表格，边框顶部、左侧和右侧为“实线1像素黑色”。

- Clement Herreman

Answer 7

不行。你为什么不尝试使用另一行表格来实现这个目的呢？

- usoban

---

使用表格进行布局，嗯？ 嘘，嘘，嘘。;-) - Treb

Answer 8

您可以这样设置边框，除了底部边框：

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

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

- Canavar