Как сделать border css

border

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.

Краткая информация

Значение по умолчанию Зависит от использования
Наследуется Нет
Применяется Ко всем элементам
Анимируется Да

Синтаксис

Обозначения

Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз. <радиус>
# Повторять один или больше раз через запятую. <время>#

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.

Стили рамок

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Пример

В данном примере вокруг блока добавляется двойная граница. Результат показан на рис. 2.

Применение свойства border

Рис. 2. Применение свойства border

Объектная модель

Объект.style.border

Примечание

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .

Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .

Спецификация

Спецификация Статус
CSS Backgrounds and Borders Module Level 3 Возможная рекомендация
CSS Level 2 Revision 1 (CSS 2.1) Рекомендация
CSS Level 1 Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

4 7 12 1 3.5 1 1
1 1 6 1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

3 CSS метода для добавления границ элементов

Когда дело доходит до CSS, иногда border не совсем border .

В этой статье мы рассмотрим различия между:

  1. border
  2. outline
  3. box-shadow

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

Обновление модели CSS Box

Ключевое различие между нашими тремя методами границы заключается в том, где они размещаются на элементе и как влияют на его размеры. Это поведение контролируется блочной моделью CSS.

  1. border это именно граница элемента, находящаяся между его заполнением и краем, и ее ширина будет влиять на вычисленные размеры элемента
  2. outline находится рядом, но вне border, перекрывая оба box-shadow и margin , но не влияя на размеры элемента
  3. по умолчанию box-shadow простирается от края границы, покрывая пространство в указанном направлении (ах), и он также не влияет на размеры элемента

Синтаксис и использование&nbsp;border

Границы были стандартом дизайна с самого начала Интернета.

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

Самый важный синтаксис рамки определяет ее ширину и стиль:

Если не определено, будет использоваться цвет по умолчанию currentColor , что означает, что будет использоваться ближайшее определение для color в каскаде.

Но для границы доступно больше стилей, и с помощью border-style вы можете определить разные стили для каждой стороны, если хотите.

Когда использовать&nbsp;border

border — хороший выбор, когда допустимо вычисление стиля в размерах элемента. А стили по умолчанию обеспечивают большую гибкость дизайна.

Синтаксис и использование&nbsp;outline

Для outline единственное обязательное свойство, чтобы сделать его видимым — это указать стиль, поскольку по умолчанию это none :

Как и border, он приобретет цвет через currentColor , и его ширина будет по умолчанию medium .

Типичное применение outline — это встроенные стили браузера :focus для интерактивных элементов, таких как ссылки и кнопки.

Этому конкретному приложению должно быть разрешено запускаться в целях доступности, если вы не можете предоставить собственный стиль :focus , который соответствует критерию успеха WCAG 2.4.7 Focus Visible.

В целях проектирования часто отмечается проблема, связанная с невозможностью outline наследовать кривую ни от одного стиля border-radius .

Когда использовать&nbsp;outline

Использование outline может быть желательным, когда вы не хотите влиять на размеры элемента, и вам не нужно, чтобы он использовал border-radius .

Синтаксис и использование&nbsp;box-shadow

Минимальные требуемые свойства для box shadow являются значениями для x и y оси, и его цвет:

При желании добавьте третий блок для создания blur и четвертый для добавления spread .

Чтобы использовать его для создания границы, мы устанавливаем значения оси x и y а также blur значение 0 . Затем установите положительное число для spread :

Это создаст вид границы вокруг элемента и может даже следовать за примененным border-radius :

Когда использовать&nbsp;box-shadow

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

А так как box-shadow может быть многослойным, это универсальный хороший инструмент для улучшения ваших макетов.

Однако он не сможет полностью имитировать некоторые стили, предоставляемые border и outline .

Собираем все вместе

Вот несколько практических сценариев, когда вам может потребоваться border альтернативный вариант.

Границы кнопок

Обычный случай реальной проблемы border — это предоставление стилей как для кнопок с рамкой, так и для кнопок без рамки, а также сценарий их выстраивания рядом друг с другом.

Типичным решением является увеличение размера кнопки без рамки до размера border-width .

Альтернативное решение с нашими новыми знаниями — использовать box-shadow вместе с ключевым словом inset для визуального размещения псевдокадровки внутри кнопки:

Обратите внимание, что ваш отступ должен быть больше border-width , чтобы предотвратить перекрытие текстового содержимого.

В качестве альтернативы, возможно, вы хотите добавить рамку на :hover или :focus . Используя реальное изображение border , вы получите нежелательный визуальный скачок при сдвиге макета, так как border ненадолго увеличит размеры в этих состояниях.

В этом случае мы можем использовать box-shadow для создания псевдо-границы, чтобы истинные размеры не увеличивались, плюс мы можем анимировать ее, используя transition :

Вот сокращенный код для приведенного выше примера:

Обновление метода отладки CSS

Классическая шутка CSS заключается в том, что для решения проблем CSS, особенно при прокрутке или позиционировании переполнения, нужно добавить:

Это добавит красную рамку к каждому элементу.

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

Вместо этого используйте:

Одним из возможных последствий использования border является добавление полос прокрутки после перерисовки содержимого. При использовании outline этого побочного эффекта не будет.

Кроме того, вы, вероятно, уже будете использовать border для элементов, поэтому повсеместное изменение border приведет к сдвигам макета, которые, безусловно, могут вызвать новые проблемы.

Обеспечение видимого фокуса

Что касается доступности, один сценарий, о котором вы можете не знать — это пользователи режима высокой контрастности Windows (WHCM).

В этом режиме предоставленные вами цвета удаляются в уменьшенную высококонтрастную палитру. Не все свойства CSS разрешены, в том числе box-shadow .

Одно практическое влияние является то, что если вы удалили outline в :focus и заменить его box-shadow , пользователи WHCM больше не будет уделять внимание фокусу.

Чтобы устранить это негативное влияние, вы можете нанести transparent контур :focus :

Подводные камни&nbsp;outlineи&nbsp;box-shadow

Поскольку outline и box-shadow находятся за пределами границы в блочной модели, вы можете столкнуться с одним из последствий, когда они исчезают за краями области просмотра. Таким образом, вам, возможно, потребуется добавить margin к элементу или padding к body в качестве контрмеры, если вы хотите, чтобы он оставался видимым.

Их размещение также означает, что они могут быть отделены такими свойствами, как overflow: hidden или использование clip-path .

Дополнительный совет: Градиентные границы

Как и было обещано, вот дополнительный совет о том, что — из методов, которые мы обсуждали — может делать только один border .

Часто забываемое свойство, связанное с границами, border-image . Синтаксис может быть немного странным при попытке использовать его с реальными изображениями.

Но в нем есть скрытая сила — он также позволяет создавать границы градиента, поскольку градиенты CSS технически являются изображениями:

Для этого необходимо определить обычную ширину и стиль границы (хотя они будут отображаться только в виде solid независимо от значения стиля), а затем свойство border-image , которое может использовать синтаксис градиента с одним добавлением. Число после градиента — это значение slice , которое для нашего градиента мы можем просто использовать 1 , чтобы практически не изменять размер / искажение градиента.

Чтобы разместить границу только с одной стороны, сначала обязательно установите нулевые значения для других сторон, иначе некоторые браузеры все равно будут добавлять ее со всех сторон:

CSS уроки, 4 часть: блочная модель, рамки, границы, отступы

Создание фреймов, внутренних отступов и расстояний между отдельными элементами HTML-страниц называется блочная модель (box model). Каждый элемент HTML может быть представлен как сложный, в своем собственном блоке, который имеет следующие компоненты:

  • поле (margin): внешняя часть блока, бесцветная и прозрачная. Чем больше граница, тем больше расстояние до соседних элементов.
  • рамка (border): окружает содержимое и внутренние отступы.
  • внутренний отступ (padding) : расстояние между содержимым поля (самого элемента) и рамкой. В отличие от границы, внутренний отступ может быть цветным &#8212; определяется цветом фона рамки.
  • контент (content): фактическая часть поля, сам элемент &#8212; рисунок, таблица, текстовое поле и т. д.

Как работает блочная модель

Определение ширины и высоты элемента

Когда вы указываете ширину и высоту элемента с помощью width и height, вы указываете только размер содержимого. Размер всего блока также зависит от границы, рамки и внутреннего отступа.

Например, пусть для элемента указываются следующие параметры:

border:2px solid blue;

Для этого блока ширина будет 200 (содержимое) + 2 * 20 (левый и правый внутренний отступ) + 2 * 2 (левая и правая граница) + 2 * 15 (левая и правая граница) = 274 пикселей.

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

Блочная модель и Internet Explorer

Большинство браузеров рассчитывают размеры блоков, как было описано выше. Одним заметным исключением является Internet Explorer &#8212; для этого браузера ширина включает рамки border и отступы padding. По этой причине элементы, которые определены шириной width, будут казаться уже, чем в других браузерах. То же самое относится и к высоте height.

Однако, решение проблемы очень простое: достаточно указать DOCTYPE для документа HTML, и Internet Explorer будет соответствовать общепринятому методу использования метода блочной модели.

CSS рамки (border)

CSS border команды дают возможность определить вид рамки: тип, цвет и толщина.

Вид рамки

Команда вида рамки задается с помощью border-style и может принимать следующие значения:

  • none: без рамки
  • dotted: рамка, сделанная из точек
  • dashed: рамка &#8212; пунктирная линия
  • solid: рамка сплошной линией
  • double: рамка двумя сплошными линиями
  • groove: трехмерная вогнутая рамка
  • ridge: трехмерная вогнутая рамка
  • inset: трехмерная объемная рамка, обращенная внутрь
  • outset: трехмерная объемная рамка, обращенная наружу

Толщина рамки

Свойство толщины рамки задается с помощью border-width, а значение можно указывать как цифрами (в пикселях), так и одним из следующих слов: thin, medium, thick, которые браузер будет интерпретировать автоматически, чтобы создать соответственно узкую, нормальную или толстую рамку. Обратите внимание, что border-width будет эффективно реализован, только если уже указан тип рамки (border-style).

Цвет рамки

Чтобы установить цвет рамки используется border-color. Аналогично цвету текста, сами значения для цвета рамки могут быть:

  • название цвета, например olive или red;
  • RGB значение, например rgb(0,255,0)
  • HEX значение, например #00FF00

Указание цвета рамки будет действительным, только если указан вид рамки (border-style).

Индивидуальные стили для отдельных сторон рамки

Вы можете указать различный тип рамки для каждой из четырех сторон, используя следующие слова:

  • border-top-style (верхняя рамка)
  • border-right-style (правая рамка)
  • border-bottom-style (нижняя рама)
  • border-left-style (левая рамка)

Аналогичным образом устанавливаются значения цвета и толщины для отдельных сторон: замените стиль на цвет или ширину соответственно (например, border-top-color устанавливает цвет для верхней рамки).

Стиль рамки: сокращенная запись

Все свойства рамки могут быть указаны кратко, используя border:

border: 3px dotted orange;

Порядок значений: толщина, тип, цвет, но, за исключением требуемого значения типа рамки, необязательно устанавливать все значения (если какое-либо значение опущено, браузер будет использовать значение по умолчанию).

CSS границы (margin)

С помощью команды margin можно обеспечить пустое пространство вокруг элемента. Это пространство является бесцветным и прозрачным и не выходит за рамки элемента.

Размеры границы могут быть назначены как индивидуально для всех четырех сторон, так и сокращенно &#8212; для всех сразу.

Для значения свойства margin используются:

  • цифры &#8212; соответствующие единицы измерения: px, pt, em и т.д.;
  • проценты (%) &#8212; за основу берется размер элемента;
  • ключевое слово auto &#8212; результат зависит от того, какие другие значения границы указаны.

Индивидуальные границы

Вот пример, для установки индивидуальных границ:

В этом примере, верхняя граница &#8212; 20 пикселей, правая &#8212; 15, нижняя &#8212; 10 и левая &#8212; 5 пикселей.

Использование сокращенной записи

Вы можете использовать сокращенную запись четырех границ следующим образом:

margin: 20px 15 px 10px 5px;

Когда после margin указаны 4 значения, они соответствуют сначала верхней, правой, нижней и левой границе (движение по часовой стрелке). Margin может быть описан тремя значениями:

margin: 20px 10px 5px;

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

Когда для margin используется только два значения, то первое значение отражает верхнюю и нижнюю границу, второе &#8212; левую и правую.

Естественно, вы можете задать все границы равными &#8212; достаточно указать только одно значение:

Еще несколько примеров

Чтобы центрировать элемент в середине страницы, вы можете использовать ключевое слово auto следующим образом:

Выравнивание элемента по правому краю, достигается путем установки для границы некоторого числового значения и автоматического для левой границы:

CSS отступы (padding)

Отступ (padding) используется для того, чтобы освободить место между содержимым элемента и его рамкой border.

Как и margin, значения отступа можно задать индивидуально для всех четырех сторон или для всех сразу.

Для значения свойства padding используются:

  • числа, за которыми следуют их единицы измерения (px, pt, em и т.д.);
  • проценты (%) &#8212; размер отступа рассчитывается как процент от размера элемента;
  • ключевое слово auto.

Определение индивидуальных отступов

Каждый из четырех отступов может быть задан отдельно:

Таким образом, верхний отступ станет 30 пикселей, правый &#8212; 25, нижний &#8212; 20, и левый &#8212; 15 пикселей.

Использование сокращенной записи

Как и margin, padding может быть установлен сокращенным способом:

  • padding: 25px 30px 20px 15px; Когда padding использует четыре значения, они означают соответственно верхний, правый, нижний и левый отступы.
  • padding: 30px 20px 15px; Три значения соответствуют верхнему, (левый и правый &#8212; равные, вторая величина) и нижнему отступу.
  • padding: 30px 20px; Padding с двумя значениями используется, когда верхний отступ равен нижнему (первая величина), а левый &#8212; равен правому отступу (второе значение).
  • padding: 25px; Если все отступы равны, они могут задаваться только одним значением padding.

Несколько примеров

Отступ в ячейках таблицы. Таким образом, рамка текстового поля не разбивается:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *