Границы и контуры CSS — ценные инструменты для веб-дизайнеров, которые хотят придать сайту изюминку. Их легко использовать, если вы знаете, как они работают, и они достаточно универсальны, чтобы удовлетворить широкий спектр потребностей. Давайте посмотрим на границы CSS, чтобы понять, с чего следует начать.
В чем разница между рамкой и контуром в CSS?
Контуры и границы CSS образуют два внешних слоя блочная модель CSS, сидящий между границами и полями. Хотя эти свойства похожи, они имеют разные значения и цели.
Во-первых, контуры CSS находятся за пределами границ. Это означает, что они могут перекрываться с содержимым за пределами элемента, к которому вы их применяете. Наряду с этим границы CSS изменяют размеры элемента, а контуры — нет.
Если у вас возникли трудности с визуализацией стилей границ и контуров, вы можете использовать средства разработки браузера для отладки их.
Значения общих свойств границы и контура CSS
Несмотря на различия, границы и контуры CSS имеют некоторые общие значения. Сокращение, которое вы используете для каждого из них, также очень похоже.
Сокращение границы и контура CSS
Как и другие сложные свойства CSS, и границы, и контуры имеют сокращенную форму. Оба этих свойства имеют один и тот же формат сокращенных опций, и это выглядит так.
граница: ширинастильцвет;
контур: ширинастильцвет;Это создает правила, которые выглядят так, когда они действуют. Однако, конечно, это сокращение не охватывает все значения, доступные для этих свойств.
граница: 10 пикселей сплошного синего цвета;
контур: 20px сплошной красный;Эти сокращенные правила границы и контура CSS приводят к тонкой синей границе с толстым красным контуром.
Как и другие сокращенные свойства CSS, вы также можете использовать отдельные свойства для достижения тех же результатов.
Ширина границы CSS и ширина контура
Ширина границ и контуров — это необязательные значения свойств CSS, которые задают толщину используемых вами границ и контуров. Формат этих свойств одинаков.
ширина контура: 20px;
ширина границы: 10px;Границы позволяют задавать индивидуальную ширину для каждой стороны элемента, а контуры — нет. Подробнее об этом вы можете прочитать в следующих разделах.
Стиль границы и стиль контура CSS
Границы и контуры CSS бывают разных стилей. Сплошные границы являются наиболее распространенными, но вы можете проявить творческий подход к использованию границ и контуров.
стиль границы: сплошной;
стиль контура: пунктирный;Вы можете найти полный список различных стилей границ и контуров CSS в конце этой статьи.
Цвет границы CSS и цвет контура
Как и в случае с другими свойствами CSS, основанными на цвете, границы и контуры принимают все допустимые цвета CSS. Сюда входят шестнадцатеричные коды, коды RGB, сокращенные цвета и многое другое.
цвет границы: синий;
цвет контура: #ff0000;Вы также можете использовать цветовые градиенты при работе с границами и контурами CSS.
Значения свойств границы CSS
Наряду со значениями общих свойств границы и контуры также имеют уникальные значения для изучения. У границ CSS есть два уникальных свойства, которые стоит изучить.
Радиус границы CSS
Добавление радиуса к границе элемента дает вам большой контроль над его формой. Каждый угол элемента может иметь разный радиус, и это свойство можно установить, даже если для свойства border-style установлено значение none.
радиус границы: 20px;Вы можете установить одно значение для изменения радиуса всех углов.
Вы также можете разделить углы на группы: верхний левый/нижний правый и верхний правый/нижний левый.
радиус границы: 10px 20px;Это позволяет легко создавать интересные формы с элементами HTML.
Наконец, вы можете установить для каждого угла свой собственный радиус.
радиус границы: 10px 20px 30px 40px;Эти значения применяются по часовой стрелке, начиная с верхнего левого угла.
Свойства границы CSS
В отличие от контуров, вы можете установить для каждой стороны границы уникальное значение многих ее свойств. Это позволяет придать каждой стороне вашего элемента разную ширину.
ширина левой границы: 10 пикселей;
ширина правой границы: 20 пикселей;
ширина верхней границы: 30 пикселей;
ширина нижней границы: 40 пикселей;Вы также можете установить независимые стили границ CSS для каждой стороны элемента.
стиль границы слева: сплошной;
граница справа: пунктирная;
стиль верхней границы: пунктир;
нижняя граница стиля: двойной;И вы можете изменить цвет каждой стороны, если хотите.
левый стиль границы: синий;
стиль границы справа: #ff0000;
граница-верхний стиль: #00ff00;
стиль нижней границы: rgb (0, 0, 255);Стороны границы CSS работают с обычным сокращением, чтобы комбинировать вот так.
граница слева: 10px сплошной синий;
граница справа: 20пиксели с точками #00ff00;
верхняя граница: 30пунктирные пиксели #ff0000;
нижняя граница: 40пикс. двойнойRGB(0, 0, 255);Значения свойств структуры CSS
Подобно границам CSS, контуры имеют собственное уникальное свойство; контур-смещение.
Смещение контура CSS
Добавление смещения к контуру создает пространство между ним и основным элементом. Это смещение должно быть одинаковым для каждой стороны контура, и свойство принимает только одно значение.
смещение контура: 10 пикселей;Это может быть хорошим способом использовать третью границу для ваших элементов, которая соответствует цвету вашего фона.
Стили границ и контуров CSS
И границы, и контуры нуждаются в стиле для работы. На выбор доступно десять стилей, включая границы, которые вообще не отображаются.
стиль границы: сплошной;
стиль границы: пунктирный;
стиль границы: пунктир;
бордюрный стиль: канавка;
бордюр: ребристый;
бордюрный стиль: двойной;
стиль границы: вставка;
стиль границы: начало;
стиль границы: скрытый;
бордюрный стиль: нет;Для границ используются те же стили, что и для контуров, только с установленным в качестве свойства стилем контура.
Как использовать границы и контуры CSS
Контуры и границы — отличные инструменты дизайна для создателей веб-сайтов. Вы можете определить внешний вид своего веб-сайта с помощью этих свойств CSS, но вам нужно проявить творческий подход.
