Что такое «область изображения границы»?

Question

Я новичок в CSS3, а в последнее время я учусь в border-image атрибуты, когда я читаю W3C документы: http://dev.w3.org/csswg/css-backgrounds/#border-image-width

я нашел следующие строки:

Граница изображения нарисованные внутри область, называемую областью изображения границы. Это область, границы которой по умолчанию соответствуют границе , см. 'border-image-outset'.

так, что именно означает «граница области изображения» и «border-box» означает? и каковы эффекты ширины границы изображения и границы изображения? Я думаю, что документы W3C не объясняют это очень четко.

благодарит заранее!

Answer 1

Пограничный ящик определяется как все, что находится внутри внешнего периметра границ коробки, включая сами границы, если таковые имеются. Это определение дано в this section of CSS2.1. Если границ нет, то это периметр поля заполнения (или, если там нет прокладки, то это поле содержимого). Область изображения границы определяется как вся область поля границы, включая отступы и содержимое.

Так что если у вас есть коробка с шириной границы 30px, то изображение границы будет помещено в 30 пикселей, окружающих поле по умолчанию. Когда вы укажете значение для border-image-outset, изображение будет отображаться так, чтобы установить расстояние от от границы, заставляя его отображаться дальше от края прокладки/содержимого.

Обратите внимание, что border-image-outset сам по себе не растягивает изображение границы; он только сдвигает область изображения границы на заданное расстояние от границы. Если вы хотите также растянуть изображение, соедините border-image-outset с border-image-width.

Answer 2

Мое понимание них не является совершенным, но, от использования я обнаружил, что:

Область изображения границы область вокруг содержимого. Если вы установите границу 1px, то это 1px. Если вы используете образ, скажем, 90 пикселей в высоту за границу, а граница 30px, как так ...

 
XoX 
o o 
XoX 

Так Х угол, о является стороной. Все, что есть в этой области, является рамкой.