What is a "border image area"?
I am new to CSS3 and I am recently learning about attributes border-image
when I read the W3C docs:
http://dev.w3.org/csswg/css-backgrounds/#border-image-width
I found the following lines:
The border image is drawn inside an area called the border image area. This is an area that has a default border, see '
border-image-outset
.
So what do "border image area" and " border-box
" mean ? and what are the effects of image border width and image border? I think the W3C docs don't explain this very clearly.
early!
source to share
A border border is defined as everything inside the outer perimeter of the box's borders, including the borders themselves, if any. This definition is given in this section of CSS2.1 . If there are no boundaries, then this is the perimeter of the pad box (or, if there is no pad, then the content box). The border image area is defined as the entire area of the border box, including padding and content.
So, if you have a box with a border width 30px
, then the border image will be placed in 30 pixels surrounding the default box. When you specify a value for border-image-outset
, the image is rendered with a distance from the border of the area, making it farther from the edge of the pad / content.
Note that border-image-outset
this does not stretch the border image by itself; it only shifts the area of the border image a given distance from the border. If you want to stretch the image, blend border-image-outset
with border-image-width
.
source to share
My understanding of them is not perfect, but from usage I have found that:
The border image area is the area that surrounds your content. If you set the border to 1px, then it's 1px. If you are using an image, say 90 pixels high for the border, and the border is 30 pixels, so ...
XoX oo XoX
So X is the angle, o is the side. Everything in this area is a frame.
source to share