css - border-left-image、border-right-image、border-top-image 和 border-bottom-image 是什么意思？

Question

所以，我是那些以始终使用最新版本的浏览器而自豪的人之一(当然 Internet Explorer 除外 - 我说的不是那个浏览器)。

我遇到了 this awesome CSS3 website详细介绍了 CSS3 中引入的 border-image 属性，包括其扩展属性，例如 border-left-image、border-right-image、 border-top-image、border-bottom-image 等等。

详细here , 大多数主流浏览器至少部分支持此属性。所以，一切都很好，对吧？没那么快...

我能够让 border-image 按预期工作，但它的扩展属性没有呈现。例如，border-right-image: url(border.png) 27 27 27 27 round round; 在 Firefox、Chrome 或 Safari 中没有任何作用!

border-image 在我们的 Internet 上有相对的记录，但任何扩展属性都非常有限(即少于十个结果)。

我们的 CSS3 专家对此有何见解？

Answer 1

扩展的 border-*-image 属性不再存在于 the current spec 中，并且已经很长时间没有了。¹如果任何浏览器仍然实现这些属性，那么它们是非标准的，您不应该期望它们获得跨浏览器支持。

就其值(value)而言，CSS3.info 已经非常过时并且最近几乎没有更新，所以我不再将其用作引用。 http://caniuse.com 处的表格始终尽可能引用当前规范(特殊情况下带有注释)，因此您需要确保在查看功能时查看最新规范，尤其是那些处于草案阶段且尚未标准化的规范。

---

¹ _{将border-image 扩展到它的各个边是Border module 中一个非常古老的想法。 (上面的 CSS3.info 页面链接到!)，它与背景模块合并，所有这些都发生在很多年前。合并发生在 2005 年，当时扩展的属性被删除，给我们留下了 border-image。以及其他几个与盒子侧面无关的属性。从那以后，这些属性就再也没有出现过；甚至在 Backgrounds and Borders 级别 4 中也没有。}