我是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 文档没有解释得很清楚。
提前致谢!
最佳答案
边框框定义为框边框外周内的所有内容,包括边框本身(如果有)。此定义在 this section of CSS2.1 中给出。 .如果没有边框,那么它就是填充框的周边(或者,如果也没有填充,那么就是内容框)。边界图像区域定义为边界框的整个区域,包括填充和内容。
因此,如果您有一个边框宽度为 30px
的框,则默认情况下边框图像适合框周围的 30 像素。当您为 border-image-outset
指定一个值时,图像将被渲染为与边界区域设置距离 away ,使其看起来离填充/内容边缘更远.
请注意 border-image-outset
本身不会拉伸(stretch)边框图像;它只会将边界图像区域从边界区域移动一定距离。如果您还想拉伸(stretch)图像,请结合使用 border-image-outset
和 border-image-width
。
关于border - "border image area"是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25567916/