Question

尝试将网站上的主要内容div设为div左侧和右侧的边框。我没有为每个边框设置单独的div，而是考虑使用CSS3中的border-left-image功能来实现它。我的代码如下：

#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%;
}

在我完成的所有Google搜索中，我还不得不解释为什么此代码无效。一些结果返回数字值放在网址之后，但无论我尝试什么组合的数字，都没有骰子。

思想？

Answer 1

所有主流浏览器中的

border-image为now supported（2014-05-22）

Demo只有一个border-left-image

Demo左右图像不同。

演示现在至少需要Chrome 15，Safari 6，Firefox 15，IE 11或Opera 15。

实际上不可能使用单独的图像文件执行此操作，但您可以切片左侧和右侧的单个图像。请参阅MDN上的border-image page，其中显示了一些很好的示例或CSS Tricks，以获得有关其他切片选项如何工作的全面摘要。

注意：如果您需要早期的浏览器支持，请询问我的答案的先前版本是否适用于Chrome 12，Safari 5.0.3，Firefox 4和Opera 10，但我现在更新了它新浏览器支持无前缀的CSS3。

编辑： Firefox现在需要额外的属性设置 - border-style: solid（请参阅CSS - New Firefox-release doesn't show Border-Image anymore）

Answer 2

良好的解决方案：Chrome兼容Firefox兼容性：

http://jsfiddle.net/Yas34/954/

错过border-style: solid当前＆＃34;答案很好＆＃34;

Answer 3

你的网址是假的（..images？）。你有没有检查过你的浏览器支持该属性？最后我检查过，不久前，没有人支持它（好吧也许是webkit nightlies）。

给CSS样式的div一个“border-left-image”

3 个答案: