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

【问题标题】：How to use an image for a border in CSS如何在 CSS 中使用图像作为边框
【发布时间】：2014-03-05 16:15:47
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

CSS3 增加了对边框图像的支持。您可以在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;
}

【讨论】：

【解决方案3】：

我不这么认为。您最好在表格下方添加一个

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

【讨论】：

【解决方案4】：

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

这里有一些细节：

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

【讨论】：

【解决方案5】：

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

好的，让我们有一个关于这个话题的W3Schools link。

【讨论】：

【解决方案6】：

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

【讨论】：

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

【解决方案7】：

试着在你的桌子下面放一个然后设置他的风格

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

应该很好用。

编辑：当然还有边框顶部，左侧，右侧为您的表格“纯 1px 黑色”

【讨论】：

【解决方案8】：

除了底部边框之外，你可以像这样设置边框：

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

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

【讨论】：