有没有办法为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

之前的草案表示可以通过以下方式使用:

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

然而,目前CSS背景和边界的候选推荐(2009年11月25日)这些属性消失了.看起来你不能再为每个边界侧使用不同的图像了.

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

编辑:border-top-image,border-left-image等出现在WD 2002-11-07中,但在WD 2005-02-16中消失了.

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