border - "border image area"是什么？

Question

我是CSS3新手，最近在学习border-image属性，在看W3C文档的时候: http://dev.w3.org/csswg/css-backgrounds/#border-image-width

我发现了以下几行:

The border image is drawn inside an area called the border image area. This is an area whose boundaries by default correspond to the border box, see ‘border-image-outset’.

那么，“border image area”和“border-box”到底是什么意思？ border-image-width 和 border-image-outset 的作用是什么？我认为 W3C 文档没有解释得很清楚。

提前致谢!

Answer 1

边框框定义为框边框外周内的所有内容，包括边框本身(如果有)。此定义在 this section of CSS2.1 中给出。 .如果没有边框，那么它就是填充框的周边(或者，如果也没有填充，那么就是内容框)。边界图像区域定义为边界框的整个区域，包括填充和内容。

因此，如果您有一个边框宽度为 30px 的框，则默认情况下边框图像适合框周围的 30 像素。当您为 border-image-outset 指定一个值时，图像将被渲染为与边界区域设置距离 away ，使其看起来离填充/内容边缘更远.

请注意 border-image-outset 本身不会拉伸(stretch)边框图像；它只会将边界图像区域从边界区域移动一定距离。如果您还想拉伸(stretch)图像，请结合使用 border-image-outset 和 border-image-width。