我是CSS3的新手，最近在学习border-image属性，当我阅读W3C文档时：
http: //dev.w3.org/csswg/css-backgrounds/#border-image-width
我发现以下几行：
边框图像绘制在称为边框图像区域的区域内。这是一个默认情况下边界对应于边框框的区域，请参阅'<code>border-image-outset'。
那么，“边框图像区域”和“ border-box”究竟是什么意思？以及border-image-width和border-image-outset的效果是什么？我认为 W3C 文档并没有很清楚地解释它。
提前致谢！
边界框被定义为框边界外周界内的所有内容，包括边界本身（如果有）。这个定义在CSS2.1 的这个部分给出。如果没有边框，那么它就是填充框的周长（或者，如果也没有填充，那么它就是内容框）。边框图像区域定义为边框框的整个区域，包括内边距和内容。
因此，如果您有一个边框宽度为 的框30px，则边框图像默认适合框周围的 30 像素。当您为 指定一个值时border-image-outset，图像将被渲染为距边界区域设定的距离，使其看起来离填充/内容边缘更远。
请注意，border-image-outset它本身不会拉伸边框图像；它只会将边框图像区域与边框区域相距一定距离。如果您还想拉伸图像，请border-image-outset结合border-image-width.
我对它们的理解并不完美，但是，从使用中我发现：
边框图像区域是您的内容周围的区域。如果你设置一个 1px 的边框，那么它就是 1px。如果你使用一个高度为 90 像素的图像作为边框，而边框是 30 像素，就像这样......
XoX 哦 XoX
所以 X 是角，o 是边。这个区域的任何东西都是边框。