如何在 CSS 中使用图像作为边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1118375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use an image for a border in CSS
提问by Ankur
I want to set the border of a table to be "1px solid black" except on the bottom, where I want to use an image which provides a pointer into the link - as a visual aid.
我想将表格的边框设置为“1px 纯黑色”，除了底部，我想在底部使用提供指向链接的指针的图像 - 作为视觉辅助。
Is it possible to set an image as the bottom border when the other borders are regular css.
当其他边框是常规css时，是否可以将图像设置为底部边框。
回答by warpech
Try putting the table inside <div class="myTableContainer"></div>and then:
尝试将桌子放在里面<div class="myTableContainer"></div>，然后：
.myTableContainer{
padding-bottom: 1px;
background: url(myBorderImage.png) bottom left;
}
This should work well across all browsers.
这应该适用于所有浏览器。
回答by Brian Hasden
CSS3 has added support for border-image. You can find more information at http://www.w3.org/TR/css3-background/#border-images. At this point (early 2012), it's probably not safe to use due to lack of support in all versions of IE. To track when it is safe to use you can visit http://caniuse.com/#search=border-image. One way to simulate the border-image style is to use a positioned background-image. For example, to simulate a top border:
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;
}
回答by F0G
Now there is CSS3and a border-imageproperty for that, but still it does not work for all browsers.
现在有CSS3和一个border-image属性，但它仍然不适用于所有浏览器。
OK, let's there be a W3Schools linkon this topic.
好的，让我们有一个关于这个主题的W3Schools 链接。
回答by exclsr
I don't think so. You're probably better off adding a <DIV> below the table, give it a black border, a fixed background, and some fixed padding or whatnot (to give it some size).
我不这么认为。你可能最好在表格下方添加一个 <DIV>，给它一个黑色边框，一个固定的背景，以及一些固定的填充或诸如此类的东西（给它一些大小）。
回答by Gordon Potter
One solution is to style your element with a background image in css and then specify an offset for the background in CSS. The background can poke out from beyond the edge of the element (a div or li element for example). This can be used for many different effects, one being the appearance of a drop shadow using pure css.
一种解决方案是在 css 中使用背景图像设置元素的样式，然后在 CSS 中为背景指定偏移量。背景可以从元素的边缘（例如 div 或 li 元素）伸出。这可以用于许多不同的效果，一种是使用纯 css 的投影外观。
Some specifics here:
这里的一些细节：
回答by Clement Herreman
Try putting a below your table then set his style like
试着在你的桌子下面放一个然后设置他的风格
.bottomborder {
height:1px;
background-image:url("yourImage.png");
}
Should work good.
应该很好用。
Edit : and of course border-top, left, right for your table a "solid 1px black"
编辑：当然还有边框顶部，左侧，右侧为您的桌子设置“纯 1px 黑色”
回答by usoban
No. Why don't you try another table row for that purpose?
不。你为什么不为此目的尝试另一个表格行？
回答by Canavar
You can set the borders like that except the bottom border :
除了底部边框之外，您可以像这样设置边框：
border-top:1px solid black;
border-right:1px solid black;
border-left:1px solid black;
For the bottom border, you can set your image as background of a row maybe.
对于底部边框，您可以将图像设置为一行的背景。
