有没有办法为CSS3边框图像的每一面使用不同的图像？

Question

在Firefox和Safari上，我可以使用以下CSS的边框图像：

-moz-border-image: url(shadow_left.png) 0 7 0 7 round round;
-webkit-border-image: url(shadow_left.png) 0 7 0 7 round round;

然而，我无法找到一种方法来左右使用不同的图像。现代浏览器是否支持这样做？

Answer 1

以前的草稿通过使用：{/ p>表示it's possible

border-top-image
border-right-image
border-bottom-image
border-left-image
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

然而，current candidate recommendation for CSS Backgrounds and Borders（2009年11月25日）这些属性消失了。看起来你不能再为每个边界侧使用不同的图像了。

作为个人笔记，我不会使用不同的图像来避免闪烁，原因与将按钮状态（未按下，按下，悬停）打包在单个图像文件中然后使用css在源中偏移相同的原因图像。

编辑：border-top-image，border-left-image等出现在WD 2002-11-07中，但在WD 2005-02-16中消失了。

EDIT2：您可能对jquery.borderimage.js插件感兴趣。

Answer 2

CSS3允许border-left-image（以及顶部，右侧，底部）我希望浏览器特定的版本也能这样做。但没有测试它。

Answer 3

阅读the CSS3 spec，似乎没有提到为不同的边使用不同的边框。但是，css3.info提到了一些应该存在的属性，但不符合规范。