html - CSS 3 border-image 究竟是如何工作的？

Question

我有一个 4x4 大小的图像，我想在 DIV 的边框周围使用它。以下内容:

-moz-border-image: url("../images/window/side.png") 4 4 4 4 / 4px 4px 4px 4px repeat repeat

将放置左右边框，但不放置底部和顶部。它出什么问题了？我想我误解了语法，如果是这样的话，这个语法到底是如何工作的？

Answer 1

如果您希望 4x4 图像沿着边框平铺，您需要创建一个新图像，12x12，看起来像一个边框已经平铺的方框。与此类似，每个菱形都是您的 4x4 图片:

_{(来源:www.w3.org)}

那么你只需使用这个 CSS:

border-image: url("border.png") 4 repeat;

official spec 中的示例可能会更清楚一些。