12

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

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

4

8 回答 8

14

试着把桌子放在里面<div class="myTableContainer"></div>,然后:

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

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

于 2009-07-13T09:03:59.657 回答
5

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;
}
于 2012-01-21T13:04:33.887 回答
2

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

于 2009-07-13T09:03:24.260 回答
2

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

这里的一些细节:

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

于 2009-07-13T09:09:27.993 回答
2

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

好的,让我们有一个关于这个主题的W3Schools 链接。

于 2013-01-23T11:59:58.970 回答
1

不。你为什么不为此目的尝试另一个表格行?

于 2009-07-13T09:03:31.983 回答
1

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

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

应该很好用。

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

于 2009-07-13T09:18:15.790 回答
0

除了底部边框之外,您可以像这样设置边框:

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

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

于 2009-07-13T09:03:31.513 回答