Фигуры из значений поля

Перечисленные выше значения соответствуют различным частям модели CSS Box. В CSS блок имеет контент, отступы, границу и отступ.

Используя значения поля для фигур, мы можем обернуть наш контент вокруг границ, определенных этими значениями. Во всех примерах ниже я использую элемент, для которого определены отступы, граница и отступ, чтобы вы могли увидеть различные способы расположения контента.

Фигура margin-box определяется внешним краем отступа и включает радиус угла фигуры, если при определении элемента был использован border-radius.

В примере ниже у нас есть фиолетовый круглый элемент, который является <div> с высотой, шириной и цветом фона. Свойство border-radius используется для создания круга путем задания border-radius: 50%. Поскольку элемент имеет отступ, вы можете видеть, что контент обтекает круглую фигуру и примененный к ней отступ.

Значение border-box — это фигура, определяемая внешним краем границы. Эта фигура следует всем обычным правилам формирования радиуса границы для внешней части границы. У вас все равно есть граница, даже если вы не использовали свойство CSS border. В этом случае это будет то же самое, что padding-box, фигура, определяемая внешним краем отступа.

В примере ниже вы можете увидеть, как текст теперь следует линии, созданной границей. Измените размер границы, и контент будет следовать за ней.

Значение padding-box определяет фигуру, заключённую во внешнем крае отступа. Эта фигура следует всем обычным правилам формирования радиуса границы для внутренней части границы. Если у вас нет отступа, то padding-box равно content-box.

Значение content-box определяет фигуру, заключённую во внешнем крае контента. Каждый радиус угла этого прямоугольника равен border-radius минус border-width и padding, или 0, в зависимости от большего значения. Это означает, что здесь невозможно иметь отрицательное значение.

Использование значений поля — простой способ создания фигур; однако по своей природе это будет работать только с очень простыми фигурами, которые можно определить, используя поддерживаемое свойство border-radius. Примеры, показанные выше, демонстрируют один такой случай использования. Вы можете создать круглую фигуру, используя border-radius и затем изогнуть текст вокруг неё.

С помощью этой базовой техники можно создать некоторые интересные эффекты. В моём последнем примере в этом разделе я разместил два элемента слева и справа, задав каждому радиус границы 100% в направлении, наиболее близком к тексту.

Для более сложных фигур вам необходимо использовать одну из базовых фигур в качестве значения или определить свою фигуру по изображению, как описано в других руководствах в этом разделе.