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

Question

只是试图给网站上的主要内容div一个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%;
}

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

思考？

Answer 1

border-image是现在支持在所有主要浏览器(2014年5月22日)

用单个演示border-left-image

使用不同的左右图像进行演示.

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

它实际上不可能有单独的图像文件要做到这一点,但你可以切片在左,右一个单一的形象.请参阅MDN border-image页面,其中显示了一些很好的示例或CSS技巧,可以全面总结其他切片选项的工作原理.

注意:如果您需要早期的浏览器支持,请询问我的答案的先前版本是否适用于Chrome 12,Safari 5.0.3,Firefox 4和Opera 10,但我已更新它,因为新浏览器支持无前缀的CSS3.

编辑: Firefox现在需要一个额外的属性设置 - border-style: solid(请参阅CSS - 新的Firefox版本不再显示Border-Image)