给一个 CSS 样式的 div 一个“border-left-image”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5541336/
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
Give a CSS styled div a "border-left-image"
提问by AJ S
Just trying to give the main content div on a site a border on the left and right side of the div. Rather than have separate divs for each border, I thought to use the border-left-imagecapability in CSS3 to make it happen. My code is as follows:
只是试图给网站上的主要内容 div 的左右两侧设置一个边框。我没有为每个边框设置单独的 div，而是想使用border-left-imageCSS3 中的功能来实现它。我的代码如下：
#content {
background-color: #7FC3F4;
height: 100%;
width: 900px;
border-left-width: 30px;
border-left-image: url(../images/border_left_gradient.png);
border-right-width: 30px;
border-right-image: url(../images/border_right_gradient.png);
margin-right: 10%;
margin-left: 10%;
}
Of all the Google searches I've done, I have to yet to come up with an explanation as to why this code isn't valid. Some results return numeric values to be placed after the url, however regardless of what combination of numbers I try, no dice.
在我进行的所有 Google 搜索中，我还没有想出解释为什么此代码无效。某些结果返回要放在 url 之后的数值，但是无论我尝试哪种数字组合，都没有骰子。
Thoughts?
想法？
采纳答案by andyb
border-imageis now supportedin all the major browsers (2014-05-22)
border-image是现在支持在所有主要浏览器（2014年5月22日）
Demowith a single border-left-image
单机演示border-left-image
Demowith different left and right images.
使用不同的左右图像进行演示。
The demos now need a minimum of Chrome 15, Safari 6, Firefox 15, IE 11 or Opera 15.
演示现在至少需要 Chrome 15、Safari 6、Firefox 15、IE 11 或 Opera 15。
It is not actually possibleto do this with separate image files, but you can slicea single image on the left and right. See the border-imagepageon MDN which shows some good examples or CSS Tricksfor a comprehensive summary of how the other slicing options work.
它实际上不可能有单独的图像文件要做到这一点，但你可以切片在左，右一个单一的形象。请参阅MDN 上的border-image页面，其中显示了一些很好的示例或CSS 技巧，以获取有关其他切片选项如何工作的全面摘要。
Note:if you need earlier browser support please ask as a previous version of my answer did work with Chrome 12, Safari 5.0.3, Firefox 4 and Opera 10 but I have updated it now that new browsers support prefix-free CSS3.
注意：如果您需要更早的浏览器支持，请询问我的答案的先前版本确实适用于 Chrome 12、Safari 5.0.3、Firefox 4 和 Opera 10，但我现在已经更新了它，因为新浏览器支持无前缀 CSS3。
Edit:Firefox now requires an additional property setting - border-style: solid(see CSS - New Firefox-release doesn't show Border-Image anymore)
编辑：Firefox 现在需要额外的属性设置 - border-style: solid（请参阅CSS - 新的 Firefox-release 不再显示 Border-Image）
回答by Matrix
Good solution : Chrome AND Firefox compatibility :
好的解决方案：Chrome 和 Firefox 兼容性：
http://jsfiddle.net/Yas34/954/
http://jsfiddle.net/Yas34/954/
missing border-style: solidto current "good answer"
缺少border-style: solid当前的“好答案”
回答by SpliFF
For one your url is bogus (..images?). for a second have you checked your browser supports the property? last I checked, which wasn't that long ago, nobody supported it (well maybe webkit nightlies).
一方面，您的网址是虚假的（..images？）。您是否检查过您的浏览器支持该属性？最后我检查，不久前，没有人支持它（也许是 webkit nightlies）。
