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

Question

只是想在站点的主要内容 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 搜索中，我还没有想出为什么此代码无效的解释。一些结果返回要放在 url 之后的数值，但是无论我尝试什么数字组合，都没有骰子。

想法？

Answer 1

border-image 是 now supported在所有主要浏览器中 (2014-05-22)

Demo使用单个 border-left-image

Demo具有不同的左右图像。

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

实际上不可能对单独的图像文件执行此操作，但您可以切片左右两侧的单个图像。查看border-image page在 MDN 上展示了一些很好的例子或 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)