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

【问题标题】：Is there a way to use a different image for each side of a CSS3 border-image?有没有办法为 CSS3 边框图像的每一侧使用不同的图像？
【发布时间】：2010-12-19 01:43:33
【问题描述】：

在 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;

但是，我想不出一种方法来为左右使用不同的图像。有没有现代浏览器支持的方法？

【问题讨论】：

url 是否接受字符串而不用单引号括起来？我只见过 url(shadow_left.png) 写成 url('shadow_left.png')

标签： image border css

【解决方案1】：

以前的草稿说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 插件感兴趣。

【讨论】：

【解决方案2】：

CSS3 允许border-left-image（和上、右、下）我希望特定于浏览器的版本也能做到这一点。但是没有测试。

【讨论】：

试过了，两种浏览器都没有骰子。在 -moz-border-image-right 上尝试了很多语法变化： url(/images/shadow_r.png) 7px round;

【解决方案3】：

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

【讨论】：