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

Question

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

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

Answer 1

尝试将表格放入

中，然后：

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

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

Answer 2

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

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

Answer 3

我不这么认为。 您最好添加一个

在表格下方，给它一个黑色边框，一个固定的背景，和一些固定的填充或诸如此类的东西（给它一些大小）。

Answer 4

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

这里有一些细节：

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

Answer 5

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

好的，我们有一个关于此主题的 W3Schools 链接。

Answer 6

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

Answer 7

尝试在桌子下面放一个，然后将他的风格设置为“

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

应该很好”。

编辑：当然还有表格的上边框、左边框、右边框“solid 1px black”

Answer 8

您可以像这样设置边框，但底部边框除外：

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

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