Свойство border-style определяет стиль границы блока. С помощью этого свойства можно установить стиль для всех границ элемента (border-top-style, border-right-style, border-bottom-style, border-left-style). Стиль рамки, по умолчанию, не наследуется и считается невидимым. Стиль может принимать любое значение в соответствии со стандартом CSS 2.1 или CSS 3, либо значением inherit. В зависимости от количества заданых значений (от 1 до 4), устанавливаются цвета для разных сторон рамки:
Если указано единственное значение, то данная величина устанавливает стиль для всех сторон (border-top-style, border-right-style, border-bottom-style, border-left-style)
Если указано два значения, то первая величина устанавливает стиль для верхней и нижней стороны (border-top-style, border-bottom-style), а вторая — для левой и правой стороны (border-left-style, border-right-style)
Три значения, устанавливают, соответственно, стиль рамки для верхней (border-top-style), правой и левой (border-left-style, border-right-style), а также нижней (border-bottom-style) сторон.
Четыре значения последовательно применяются для всех сторон начиная с верхней по часовой стрелке — верхняя, правая, нижняя, левая границы.
Доступные стили:
Для стилей groove, ridge, inset, outset в спецификации не утвержден метод расчета цвета, поэтому в разных браузера, рамки с такими стилями могут немного визуально отличаться (см. примеры). Так же в спецификации не обсуждается размер точек, штрихов и промежутков между ними для стилей dotted и dashed, рекомендуется только выбирать такие размеры, чтобы углы рамки смотрелись симметрично, кроме этого в браузерах на движках Trident (Internet Explorer) и Gecko (Firefox) стиль dotted отображается кружками, а в браузерах на движках WebKit (Chrome,Safari) и Presto (Opera) квадратиками.
Специфические стили:
Данные стили доступны только в определенных версиях браузеров и не являются часть стандарта CSS.
Trident (Internet Explorer)
window-inset — выглядит аналогично inset, за тем исключением, что дополнительно рамка окружена неприрывной линией, нарисованной основным цветом.
Примеры использования
CSS 2.1, CSS3
Значение
1px
2px
3px
5px
15px
.elementBorderStyle {
border-style: dotted;
}
dotted пунктир
dotted пунктир
dotted пунктир
dotted пунктир
dotted пунктир
.elementBorderStyle {
border-style: dashed;
}
dashed штрих
dashed штрих
dashed штрих
dashed штрих
dashed штрих
. elementBorderStyle {
border-style: solid;
}
solid линия
solid линия
solid линия
solid линия
solid линия
.elementBorderStyle {
border-style: double;
}
double линия
double линия
double линия
double линия
double линия
.elementBorderStyle {
border-style: groove;
}
groove паз
groove паз
groove паз
groove паз
groove паз
. elementBorderStyle {
border-style: ridge;
}
ridge ребро
ridge ребро
ridge ребро
ridge ребро
ridge ребро
.elementBorderStyle {
border-style: inset;
}
inset вкладка
inset вкладка
inset вкладка
inset вкладка
inset вкладка
.elementBorderStyle {
border-style: outset;
}
outset накладка
outset накладка
outset накладка
outset накладка
outset накладка
Вариации в отображении стилей для рамок элементов в зависимости от браузеров
Internet Explorer
Firefox
Chrome, Safari (WebKit)
Opera (Presto)
Ваш браузер
3px
5px
15px
dotted
dotted
dotted
dashed
dashed
dashed
groove
groove
groove
ridge
ridge
ridge
inset
inset
inset
outset
outset
outset
Свойство border-style относится к спецификации CSS, применяется к всем элементам, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение none. На данный момент свойство поддерживается во всех основных браузерах.
Смотри также:
border-top-style — Стиль верхней линии рамки элемента
border-right-style — Стиль правой линии рамки элемента
border-bottom-style — Стиль нижней линии рамки элемента
border-left-style — Стиль левой линии рамки элемента
Для управления видом границы предоставляется несколько значений свойства
border-style. Вид зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселей.
Табл. 1. Вид рамки в зависимости от стиля и толщины границы элемента
1 пиксель
3 пикселя
5 пикселей
7 пикселей
dotted
dotted
dotted
dotted
dashed
dashed
dashed
dashed
solid
solid
solid
solid
double
double
double
double
groove
groove
groove
groove
ridge
ridge
ridge
ridge
inset
inset
inset
inset
outset
outset
outset
outset
Кроме перечисленных в таблице значений используются следующие ключевые слова.
none
Не отображает границу и её толщина border-width задаётся нулевой.
hidden
Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае вокруг ячейки граница не будет отображаться вообще.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл. 2.
Табл. 2. Зависимость результата использования от числа значений
Число значений
Результат
1
Стиль границы будет задан для всех сторон элемента.
2
Первое значение устанавливает стиль верхней и нижней границы, второе — левой и правой.
3
Первое значение задаёт стиль верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4
Поочередно устанавливается стиль верхней, правой, нижней и левой границы.
Значение по-умолчанию:
border-top-style: none;
Применяется ко всем элементам
Спецификации
CSS Backgrounds and Borders Module Level 3
CSS Level 2 (Revision 1)
CSS Level 1
Описание и примеры
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>border-style</title>
<style>
p {
border-style: double; /* Стиль линии вокруг абзаца */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<p>
Развивая эту тему, крещендирующее хождение просветляет
миксолидийский райдер.
</p>
</body>
</html>
Borders CSS уроки для начинающих академия
❮ Назад
Дальше ❯
Свойства границы CSS
Свойства CSS border позволяют задавать стиль, ширину и цвет границы элемента.
У меня есть границы со всех сторон.
У меня есть красная Нижняя граница.
У меня округлые границы.
У меня синяя левая граница.
Стиль границы
Свойство border-style указывает тип отображаемой границы.
Допустимы следующие значения:
dotted — Определяет пунктирную границу
dashed — Определяет пунктирную границу
solid — Определяет сплошную границу
double — Определяет двойную границу
groove — Определяет 3D канавку границы. Эффект зависит от значения цвета границы
ridge — Определяет трехмерную ребристую границу. Эффект зависит от значения цвета границы
inset — Определяет 3D-вставку границы. Эффект зависит от значения цвета границы
outset — Определяет трехмерную границу начала. Эффект зависит от значения цвета границы
none — Не определяет границы
hidden — Определяет скрытую границу
Свойство border-style может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы и левой границы).
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A hidden border.
A mixed border.
Примечание: Никакие другие свойства границы CSS, описанные ниже, не будут иметь никакого эффекта, если не задано свойство border-style!
Ширина границы
Свойство border-width задает ширину четырех границ.
Ширина может быть задана как конкретный размер (в px, PT, cm, EM и т.д.) или с помощью одного из трех предварительно определенных значений: тонкий, средний, или толстый.
Свойство border-width может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы и левой границы).
стиль границы: пунктирная Сплошная двойная пунктирная;
Верхняя граница пунктирная
Правая граница сплошная
Нижняя граница двойная
Левая граница пунктирная
Если свойство border-style имеет три значения:
Пограничный стиль: точечный сплошной двойной;
Верхняя граница пунктирная
правая и левая границы являются сплошными
Нижняя граница двойная
Если свойство border-style имеет два значения:
граница стиля: пунктирная твердая;
верхние и нижние границы пунктирные
правая и левая границы являются сплошными
Если свойство border-style имеет одно значение:
граница стиля: пунктирная;
все четыре границы пунктирные
Свойство border-style используется в приведенном выше примере. Однако, он также работает с border-width и border-color.
Граница-Сокращенное свойство
Как видно из приведенных выше примеров, есть много свойств, которые следует учитывать при работе с границами.
Чтобы сократить код, можно также указать все свойства отдельных границ в одном свойстве.
Свойство border является сокращенным свойством для следующих отдельных свойств границы:
border-width
border-style (required)
border-color
Пример
p {
border: 5px solid red; }
Result:
Some text
Можно также указать все свойства отдельных границ только для одной стороны:
Левая граница
p {
border-left: 6px solid red; background-color: lightgrey; }
Result:
Some text
Нижняя граница
p {
border-bottom: 6px solid red; background-color: lightgrey; }
Result:
Some text
Закругленные границы
Свойство border-radius используется для добавления округленных границ к элементу:
Normal border
Round border
Rounder border
Roundest border
Пример
p { border: 2px solid red;
border-radius: 5px; }
Note: The border-radius property is not supported in IE8 and earlier versions.
Другие примеры
Все свойства верхнего края в одном объявлении В этом примере демонстрируется Сокращенное свойство для задания всех свойств верхней границы в одном объявлении.
Задание стиля нижней границы В этом примере демонстрируется установка стиля нижней границы.
Задание ширины левой границы В этом примере показано, как задать ширину левой границы.
Установка цвета четырех границ В этом примере демонстрируется установка цвета четырех границ. Он может иметь от одного до четырех цветов.
Установка цвета правой границы В этом примере демонстрируется установка цвета правой границы.
Все свойства границы CSS
Свойство
Описание
border
Задает все свойства границы в одном объявлении
border-bottom
Задает все свойства нижней границы в одном объявлении
border-bottom-color
Задает цвет нижней границы
border-bottom-style
Задает стиль нижней границы
border-bottom-width
Задает ширину нижней границы
border-color
Задает цвет четырех границ
border-left
Задает все свойства левой границы в одном объявлении
border-left-color
Задает цвет левой границы
border-left-style
Задает стиль левой границы
border-left-width
Задает ширину левой границы
border-radius
Устанавливает все четыре границы-*-свойства радиуса для скругленных углов
border-right
Задает все свойства правой границы в одном объявлении
border-right-color
Задает цвет правой границы
border-right-style
Задает стиль правой границы
border-right-width
Задает ширину правой границы
border-style
Задает стиль четырех границ
border-top
Задает все свойства верхнего края в одном объявлении
border-top-color
Задает цвет верхней границы
border-top-style
Задает стиль верхней границы
border-top-width
Задает ширину верхней границы
border-width
Задает ширину четырех границ
❮ Назад
Дальше ❯
Руководство CSS Borders
Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи. Facebook
1- CSS Border Overview
Свойство (property) CSS Border используется для установки границы (border) элементу, точнее ширину границы (border width), стиль границы (border style), и цвет границы (border color).
Самый простой синтаксис для установки границы (border) для элемента:
Свойство (property) CSS border-width используется для установки ширины границы для элемента. Вы можете предоставить ему 4 значения, включая ширину верхней стороны, ширину правой стороны, ширину нижней стороны, ширину левой стороны.
Если вы предоставите 2 значения для CSS border-width, первое значение применяется к верхней и нижней стороне, второе значение применяется к левой и правой стороне.
Если вы предоставите 3 значения для CSS border-width, первое значение применяется к верхней стороне, второе значение применяется к левой и правой стороне, третье значение применяется к нижней стороне.
Если вы предоставите 1 значения для CSS border-width, оно будет применено ко всем 4-м сторонам элемента.
Вместо использования CSS border-width, вы можете использовать CSS border-top-width, CSS border-right-width, CSS border-bottom-width, CSS border-left-width.
Свойство (property) CSS border-style используется для настройки стиля границы (border style) для элемента. Вы можете ей предоставить 4 значения, это стили верхней, правой, нижней и левой сторон.
Если вы предоставите 2 значения для CSS border-style, первое значение применяется к верхней и нижней сторонам, второе значение применяется к левой и правой сторонам.
<div>
border-style: dotted dashed;
</div>
Если вы предоставите 3 значения для CSS border-style, первое значение применяется к верхней стороне, второе значение применяется к левой и правой сторонам, третье значение применяется к нижней стороне.
css-boder-style-example3.html
<div>
border-style: dotted dashed solid;
</div>
Если вы предоставите 1 значение для CSS border-style, оно применится ко всем сторонам элемента.
Вместо использования CSS border-style, вы можете использовать CSS border-top-style, CSS border-right-style, CSS border-bottom-style, CSS border-left-style.
CSS border-style:none и CSS border-style:hidden одинаковы, они только отличаются когда используются для свернутой таблицы (Collapsed table). Вы можете просмотреть объяснение в статье ниже:
CSS Tables
5- CSS border-color
Свойство (property) CSS border-color используется для установки цвета границы (border color) для элемента. Вы можете предоставить ему 4 значения, это цвета для верхней, правой, нижней и левой сторон.
<div>
border-color: green red purple yellow;
</div>
Если вы предоставите 2 значения для CSS border-color, первое значение применяется к верхней и нижней сторонам, второе значение применяется к левой и правой сторонам
<div>
border-color: green red;
</div>
Если вы предоставите 3 значения для CSS border-color, первое значение применяется к верхней cтороне, второе значение применяется к левой и правой сторонам, третье значение применяется к нижней стороне.
css-border-color-example3.html
<div>
border-color: green red blue;
</div>
Вместо использования CSS border-color, вы можете использовать CSS border-top-color, CSS border-right-color, CSS border-bottom-color, CSS border-left-color.
Следующий шаг в эволюции CSS | by Workafrolic (±∞) | Web Standards
Следующий шаг в эволюции CSS
Перевод «New CSS Logical Properties!» Элада Шехтера.
Большинство из нас, разработчиков, мыслят терминами право-лево и верх-низ. Всё потому что изначально интернет предназначался, главным образом, для загрузки документов, а не для сайтов со сложной структурой, которые мы создаём сегодня. Потому что никто в тот момент не учитывал потребностей многоязычных сайтов.
До недавнего времени переменные в Sass были лучшим способом поддержки сайтов с языками, текст которых пишется в разные стороны (RTL и LTR). Если вы хотите узнать больше, то почитайте мою статью «The Best Way to RTL Websites with Sass!»
Новые логические свойства дают нам гораздо больше возможностей управлять нашими сайтами, независимо от того, на каком они языке (английский, арабский, японский или другие), с минимальными изменениями стилей.
Самое время начать!
Мы привыкли видеть что-то подобное, когда обсуждаем блочную модель:
Раньше так было правильно, и остаётся до сих пор, но подходят последние деньки классических физических свойств типа margin-left, padding-right, border-top и других.
Прежде чем начать использовать новые логические свойства, вам нужно перестать думать терминами право-лево, верх-низ, и заменить их на inline-start, inline-end и block-start, block-end.
Строчная ось
Давайте для примера возьмём английский язык. Направление текста начинается слева и идёт направо.. Это строчный аспект свойств. Это можно легко запомнить, рассмотрев ряд элементов с display: inline. Каждый элемент отображается в строку.
Например, padding-inline-start задаст отступ с той стороны, где начинается контент на текущем языке:
Английский: padding-inline-start = padding-left
Арабский: padding-inline-start = padding-right
Японский: padding-inline-start = padding-top
Блочная ось
При замене верхних и нижних связанных свойств легко вспоминать, что верх находится в начале нашего сайта, а низ — в конце. Просто представьте несколько элементов с display: block, которые расположены друг над другом.
Возможно, вы всё ещё спрашиваете себя, а разве это не всегда так?!
Ответ чуточку сложнее. В настоящее время все сайты на любых языках работают именно таким образом. Просто потому что до сих пор не было других доступных методов.
Сайты на японском и некоторых других восточных языках идут справа налево, а не сверху вниз! Чтобы понять, каково это, представьте, что вы повернули экран на 90° вправо. Сайт приходится листать не по вертикали, а по горизонтали!
Пример блочных свойства:
Английский и арабский: padding-block-start = padding-top
Японский: padding-block-start = padding-right
margin, padding и border
После того, как вы разобрались со строчной и блочной осями, вы можете использовать их по прямому назначению.
Пример для английского:
margin
margin-block-start = margin-top
margin-block-end = margin-bottom
margin-inline-start = margin-left
margin-inline-end = margin-right
padding
padding-block-start = padding-top
padding-block-end = padding-bottom
padding-inline-start = padding-left
padding-inline-end = padding-right
border
border-block-start = border-top
border-block-end = border-bottom
border-inline-start = border-left
border-inline-end = border-right
width и height заменяются на inline-size и block-size
Свойства heightи widthтакже должны соответствовать этой новой методологии. Как только мы свыкнемся с методологией строка-блок, станет легче разобраться с размерами. Для английского языка свойство width следует заменить на inline-size, а свойство height — на block-size.
Пример строчного и блочного размеров: Для английского и арабского (LTR и RTL)
width = inline-size
height = block-size
В языках, идущих сверху вниз, например, японском, мы столкнёмся с противоположным:
inline-size = height
block-size = width
Для минимальных и максимальных свойств просто добавьте min или max в начале. К примеру:
min-inline-size: 300px
max-block-size: 100px
Позиционирование в CSS
Свойства, которые мы раньше использовали для позиционирования, top, bottom, left, right, превратились в новые свойства с префиксом inset: inset-block-start, inset-block-end, inset-inline-start, inset-inline-end.
Для английского (LTR):
top = inset-block-start
bottom = inset-block-end
left = inset-inline-start
right = inset-inline-end
/* Старая техника */ .popup { position: fixed; top: 0; bottom: 0; left: 0; right: 0; }/* Новая техника */ .popup { position: fixed; inset-block-start: 0; /* top - для английского */ inset-block-end: 0; /* bottom - для английского */ inset-inline-start: 0; /* left - для английского */ inset-inline-end: 0; /* right - для английского */ }
Бросив беглый взгляд, вы можете задаться вопросом, какого чёрта я должен использовать такие сложные имена?! Но на то есть веская причина. Новые имена свойств можно комбинировать в шорткаты, подобно текущим padding, margin, border.
Пример:
.popup { position: fixed; inset: 0 0 0 0; /* top, right, bottom, left - для английского */ }
Обтекание в CSS
Обтекание довольно простое, есть всего два значения, inline-start и inline-end, которые заменяют собой left и right.
Для английского (LTR):
float: left = float: inline-start
float: right = float: inline-end
Text-align
Это свойство даже проще чем обтекание, значения left и right заменяются на start и end.
Для английского (LTR):
text-align: left = text-align: start
text-align: right = text-align: end
Ещё
Свойство resize используется в основном для <textarea>. Его значения изменятся с horizontal и vertical на inline и block.
Для английского (LTR):
resize: horizontal = resize: inline
resize: vertical = resize: block
У свойства background-position пока нет реализации ни в одном из браузеров, но если копнуть поглубже, то можно найти отсылки к background-position-inline и background-position-blockна MDN. Ещё нет нормальной документации, но они работают над этим! 🙂
Прочее: уже сейчас можно предположить, что свойства типа transform-originтоже будут обновлены, как и любые другие свойства, имеющие отношение к направлению.
Гриды и флексбоксы
Хорошая новость в том, что гриды и флексбоксы уже построены на новых логических свойствах и нет нужды их обновлять.
Рабочий процесс с учётом логических свойств
На первый взгляд это выглядит очень сложно. Но в работе всё просто. При написании стилей не нужно беспокоиться о поддержке нескольких языков. Вы просто используете логические свойства взамен старых физических свойств.
После того, как мы рассмотрели все обновлённые логические свойства, вот вам ещё два, которые позволят определить выравнивание блочной оси (поток сайта) и выравнивание строчной оси (направление чтения текста).
Свойство writing-mode (блочная ось)
Определились с потоком сайта. В большинстве случаев он будет идти сверху вниз, но, как уже упоминалось, для некоторых языков он может идти справа налево (японский) или даже слева направо (монгольский). В обоих случаях у нас будет горизонтальная прокрутка, а не вертикальная, как мы привыкли.
Примечание: на данный момент есть три основных значения для writing-mode. Их имена могут сбить с толку. Всё потому, что в них есть направление блочной оси плюс выравнивание текста (строчная ось). Это вгоняет в тоску, выравнивание текста тут явно избыточно и только вызывает путаницу.
Чтобы избежать этой путаницы, я рекомендую игнорировать часть значения со строчной осью и обращать внимание только на часть значения для блочной оси.
Примеры
Значения:
writing-mode: horizontal-tb — сверху вниз, как для английского (значение по умолчанию)
writing-mode: vertical-rl; = справа налево,для японского.
writing-mode: vertical-lr; = слева направо, для монгольского.
Моё личное мнение — в значениях нужно оставить только tb, rl, lr(часть для блочной оси), чтобы устранить потенциальную путаницу.
Пример для японского:
html { writing-mode: vertical-rl; }
Свойство
direction (строчная ось)
Определяет, откуда должен начинаться текст: слева направо или справа налево, но только в случае, если задано значение по умолчанию для свойства writing-mode. Если мы поменяем значение writing-mode на один из вертикальных режимов, то фактическое направление написания изменится с положения слева направо и будет идти сверху вниз. Или наоборот, при значении с rtl (справа налево), оно изменится на сверху вниз.
Пример направления для арабского:
html { direction: rtl; }
Даже удивительно, на сколько просто сайт, идущий сверху вниз, можно преобразовать в идущий справа налево с горизонтальной прокруткой.
Я сделал небольшое демо. Его лучше смотреть в Firefox, в текущий момент именно в нём поддерживается наибольшее количество свойств.
Демо (попробуйте поменять язык):
Все свойства блочной модели margin, padding, border и новые свойства ширины и высоты (inline-size, block-size) уже работают во всех основных браузерах, кроме Edge.
Новые значения для text-align также работают везде, кроме Edge.
Свойства и значения для float, position, resize работают пока только в Firefox.
Со всеми этими новыми доработками мы столкнёмся с новыми для нас проблемами. Например, что если мы захотим записать все значения свойства в сокращённом виде: margin: 10px 20px 8px 5px? В таком случае мы не сможем предсказать, как это будет проинтерпретировано браузером. Если сайт построен на физических свойствах, то значения будут расшифрованы следующим образом: margin-top, margin-right, margin-bottom, margin-left. Но если сайт построен на новых логических свойствах, то значения будут расшифрованы так: margin-block-start, margin-inline-end, margin-block-end, margin-inline-start.
На сайтах, написанных под английский (или русский) язык, физические и логические свойства будут работать одинаково. Для сайтов на других языках значения сокращений, как в примере с margin, должны работать в соответствии со значением свойства direction или writing-mode.
Этот вопрос всё ещё открыт. Я внёс предложение, которое может решить эту проблему. Если у вас есть решение получше, то вы можете оставить комментарий в этой ветке!
В данный момент, если вы хотите использовать логические единицы, вам следует отказаться от шорткатов в пользу полных названий свойств.
Предложенное мною решение:
html { flow-mode: physical; /* или */ flow-mode: logical; }.box { /* будет интерпретироваться согласно значению flow-mode*/ margin: 10px 5px 6px 3px; padding: 5px 10px 2px 7px; }
Проблемы с адаптивным дизайном
Пока пытался создать рабочее демо, я попробовал использовать новое свойство максимальной ширины max-inline-sizeвнутри медиавыражения, предполагая, что для языков «справа налево» / «слева направо» оно будет вести себя как max-width, а для языков вроде японского — как max-height. К сожалению, браузеры пока отказываются понимать это свойство внутри медиавыражений.
/* Не работает */ @media (max-inline-size: 1000px) { .main-content { background: red; grid-template-columns: auto; } }
Изменения, которые нужно учесть
Во время написания этого поста, уже после глубокого изучения и понимания концепции логических свойств, я заметил несколько упущенных моментов, которые следует поправить в будущем:
line-height заменить на line-size
border-width заменить на border-size
Но, похоже, пока не стоит этого ждать, по крайней мере в отношении border-width. Это свойство обновили буквально только что и в его названии по-прежнему присутствует width. Пример: border-block-start-width.
Но кто знает, может этот пост попадётся на глаза правильным людям из W3C 🙂
Вот и всё. Я надеюсь, что вам понравилась эта статья и вы узнали что-то новое. Я буду признателен, если вы поаплодируете или поделитесь этим постом 🙂
Больше постов по типографике
CSS Writing Modes — крайне рекомендую!
Text Orientations
Другие мои посты о CSS
The Best Way to RTL Websites with Sass!
CSS Architecture for Multiple Websites With Sass
Becoming a CSS Grid Ninja!
The New Responsive Design Evolution
Как на самом деле работает position: sticky в CSS
Кто я?
Меня зовут Элад Шехтер, я веб-разработчик, специализирующийся на дизайне и архитектуре CSS и HTML. Я работаю на Investing.com.
Читать меня можно тут: Твиттер, Facebook, LinkedIn.
Вы можете найти меня в группах на Facebook:
CSS Masters
CSS Masters Israel
Перевод Алёны Батицкой, редактура Вадима Макеева и Алексея Стегуры
стиль границ — CSS: Каскадные таблицы стилей
Свойство CSS border-style задает стиль линии для всех четырех сторон границы элемента.
Это свойство является сокращением для следующих свойств CSS:
border-bottom-style
граница слева
граница справа
окантовка сверху
/* Значения ключевых слов */
бордюрный стиль: нет;
стиль границы: скрытый;
стиль границы: пунктирный;
стиль границы: пунктир;
стиль границы: сплошной;
бордюр: двойной;
бордюрный стиль: канавка;
бордюр: ребристый;
стиль границы: вставка;
стиль границы: начало;
/* сверху и снизу | Лево и право */
стиль границы: пунктирная сплошная;
/* сверху | влево и вправо | нижний */
стиль границы: скрытый двойной пунктир;
/* сверху | право | дно | оставил */
стиль границы: сплошной пунктирный пунктирный;
/* Глобальные значения */
стиль границы: наследовать;
стиль границы: начальный;
стиль границы: вернуться;
стиль границы: обратный слой;
стиль границы: не установлен;
Свойство в стиле границы может быть указано с использованием одного, двух, трех или четырех значений.
Когда указано одно значение , тот же стиль применяется ко всем четырем сторонам .
Когда указаны два значения , первый стиль применяется к верхнему и нижнему , второй — к левому и правому .
Когда указаны три значения , первый стиль применяется к 9 верхним 0006 , второй до слева и справа , третий до снизу .
Когда указаны четыре значения , стили применяются к верхнему , правому , нижнему и левому в указанном порядке (по часовой стрелке).
Каждое значение представляет собой ключевое слово, выбранное из списка ниже.
Значения
Описывает стиль границы. Может принимать следующие значения:
нет
Как и скрытое ключевое слово , граница не отображается. Если не установлено background-image , вычисленное значение border-width той же стороны будет равно 0 , даже если указанное значение является чем-то другим. В случае схлопывания ячейки таблицы и границы значение none имеет самый низкий приоритет : если установлена любая другая конфликтующая граница, она будет отображаться.
скрытый
Как и ключевое слово none , граница не отображается. Если не установлено background-image , вычисленное значение border-width той же стороны будет равно 0 , даже если указанное значение является чем-то другим. В случае схлопывания ячейки таблицы и границы скрытое значение имеет наивысший приоритет : если установлена какая-либо другая конфликтующая граница, она не будет отображаться.
с точками
Отображает ряд закругленных точек. Расстояние между точками не определяется спецификацией и зависит от реализации. Радиус точек равен половине вычисленного значения ширины границы той же стороны .
пунктир
Отображает серию коротких штрихов с квадратными концами или сегментов линии. Точный размер и длина сегментов не определяются спецификацией и зависят от реализации.
сплошной
Отображает одну прямую сплошную линию.
двойной
Отображает две прямые линии, которые в сумме составляют размер в пикселях, определенный параметром border-width .
канавка
Отображает резную рамку. Это противоположность ребру .
ребро
Отображает границу с вытянутым внешним видом. Это противоположность канавке .
вкладыш
Отображает границу, благодаря которой элемент выглядит встроенным. Это противоположность начало . При применении к ячейке таблицы с параметром border-collapse , установленным на Collapse , это значение ведет себя как канавка .
начало
Отображает рамку, которая делает элемент рельефным. Это противоположно вставке . При применении к ячейке таблицы с параметром border-collapse , установленным на Collapse , это значение ведет себя как ridge .
border-style = {1,4}
"> = нет | скрытый | с точками | пунктир | твердый | двойной | канавка | хребет | вставка | начало
Все значения свойств
Вот пример всех значений свойств.
HTML
нет
скрыто
точечный
пунктир
твердый
двойной
канавка
гребень
вставка
начало
CSS
пред {
высота: 80 пикселей;
ширина: 120 пикселей;
поле: 20 пикселей;
отступ: 20 пикселей;
отображение: встроенный блок;
цвет фона: бледно-зеленый;
ширина границы: 5px;
box-sizing: граница-коробка;
}
/* примеры классов в стиле границы */
.b1 {
бордюрный стиль: нет;
}
.Би 2 {
стиль границы: скрытый;
}
.b3 {
стиль границы: пунктирный;
}
.b4 {
стиль границы: пунктир;
}
.b5 {
стиль границы: сплошной;
}
.b6 {
бордюр: двойной;
}
.b7 {
бордюрный стиль: канавка;
}
.b8 {
бордюр: ребристый;
}
.b9 {
стиль границы: вставка;
}
.b10 {
стиль границы: начало;
}
Результат
Спецификация
Неизвестный спецификация # пограничный стиль
9 9026. SDAD. Включите JavaScript для просмотра данных.
Сокращенные свойства CSS, связанные с границей: border , border-width , border-color , border-radius
Последнее изменение: , авторы MDN
Как создать трехмерную границу начала и вставки с помощью CSS?
Посмотреть обсуждение
Улучшить статью
Сохранить статью
Последнее обновление:
21 мая, 2021
Читать
Обсудить
Посмотреть обсуждение
Улучшить статью
Сохранить статью
В этой статье мы создадим начальную и внутреннюю границу 3D с помощью CSS. Свойство Inset border делает содержимое встроенным (внутри поверхности), а свойство outset делает содержимое рельефным (вне поверхности). Вы можете выполнить эту задачу, используя свойство border-style, которое используется для оформления границы.
Граница 3D-вставки: Используется для определения границы 3D-вставки, и ее эффект зависит от значения цвета границы.
Синтаксис:
element_name (или селектор) .Inset {пограничный стиль: вставка;}
Когда мы посещаем веб-сайт, иногда мы видим красивые рамки вокруг текста, которые улучшают пользовательский интерфейс и помогают улучшить интерактивность содержимого. В CSS эти рамки называются границами, и они играют важную роль в веб-дизайне. CSS предоставляет несколько свойств границ, которые позволяют нам установить стиль границы, ширину и т. д.
В этой статье представлен подробный обзор следующих свойств границы:
стиль границы : используется для установки стиля границы, например, пунктирная, сплошная и т. д.
цвет границы : используется для установки цвета границы, например, красного, #00ff00 и т. д.
border-width : используется для установки ширины границы, такой как толстая, тонкая, в пикселях и т. д.
В этой статье с помощью примеров объясняется, как использовать каждое из вышеупомянутых свойств.
Свойство стиля границы CSS
Свойство, определяющее внешний вид границы. Свойство CSS border-style предоставляет следующие значения:
hidden : установка скрытой границы.
сплошная : установить границу сплошной линией.
с точками : укажите пунктирную границу.
пунктир : установите пунктирную границу.
double : установить границу двойной линии.
канавка : определяет трехмерную рифленую границу.
гребень : устанавливает трехмерную границу гребня.
вставка : определяет границу трехмерной вставки
начало : используется для установки начальной границы 3D
Примечание : Трехмерный эффект канавки, ребра, вставки и начала зависит от значения цвета границы.
Пример Приведенный ниже код создает несколько абзацев и реализует все вышеупомянутые значения, чтобы показать эффекты каждого свойства стиля границы CSS:
HTML
Абзац со скрытой рамкой
Абзац со сплошной рамкой
Абзац с пунктирной рамкой
Абзац с пунктирной рамкой
Абзац с двойной рамкой
Абзац с рифленой рамкой
Абзац с гребенчатой рамкой
Абзац с вставить границу
Абзац с внешней границей
CSS
.hidden-border { padding: 0; стиль границы: скрытый; }
.solid-border { padding: 0; стиль границы: сплошной; }
.dotted-border { padding: 0; стиль границы: пунктирный; }
.dashed-border { padding: 0; стиль границы: пунктир; }
. double-border { padding: 0; стиль границы: двойной; }
.groove-border { padding: 0; стиль границы: канавка; }
.inset-border { padding: 0; стиль границы: вставка; }
.outset-border { padding: 0; стиль границы: начало; }
Приведенный выше код создаст следующий вывод:
CSS свойство border-color
Как следует из самого названия, это позволяет нам указать цвет границы. Цвет можно указать с помощью предопределенных имен цветов, шестнадцатеричных значений и т. д. Цвет каждой стороны можно изменить индивидуально, используя свойства border-bottom-color, border-top-color, border-left-color и border-right-color. .
Пример Рассмотрим приведенный ниже фрагмент кода, определяющий цвет границы с помощью шестнадцатеричного кода:
HTML
Простой пример цвета границы.
CSS
p{ стиль границы: пунктир; цвет границы: #00f; }
Приведенный выше код сгенерирует следующий код:
Давайте немного расширим приведенный выше код, чтобы покрасить каждую сторону границы по-разному.
HTML
Простой пример цвета границы.
CSS
p{ стиль границы: пунктир; border-top-color: #00f; граница-нижний-цвет: #f00; цвет левой границы: #000; цвет правой границы: #0f0; }
Мы получим следующий вывод:
Свойство CSS border-width
Свойство border-width используется для установки ширины границы. Свойство ширины границы принимает значения либо в пикселях, либо в предопределенном значении, таком как толстая, тонкая и т. д.
Пример Давайте рассмотрим приведенный ниже код, который указывает ширину границы в 2 пикселя:
HTML
Простой пример ширины границы.
CSS
p{ стиль границы: сплошной; ширина границы: 2 пикселя; }
Мы получим следующий вывод:
Свойство CSS border-radius
Свойство border-radius определяет закругленную границу элемента, а длина определяет форму его углов.
Пример Давайте рассмотрим приведенный ниже фрагмент кода, который определяет радиус границы как 10 пикселей:
HTML
Простой пример радиуса границы.
CSS
p { граница: 2 пикселя сплошная; граница-радиус: 10 пикселей; }
Выходные данные
Выходные данные подтверждают, что свойство border-radius обеспечивает закругление угла границы:
Сокращенное свойство границы CSS
позволяет нам реализовать все эти свойства границ в одной строке.
Пример
В приведенном ниже коде мы реализуем несколько свойств в одной строке CSS, используя сокращенное свойство:
HTML
Простой пример сокращенного свойства границы.
CSS
p { граница: 3 пикселя, сплошная синяя; }
Вместо реализации каждого свойства границы по отдельности приведенный выше код реализует ширину границы,
Вывод подтвердил, что сокращенное свойство успешно реализовало все три свойства границы.
Заключение
CSS предоставляет свойства border-width, border-style и border-color для установки ширины границы, стиля границы и цвета границы элемента HTML соответственно. В этой статье представлен всесторонний обзор границ CSS и обсуждается, как создать границу, установить цвет границы, изменить стиль границы и установить ширину границы с помощью простых и понятных примеров.
Firefox (Windows) не распознает стиль границы: вставка; - HTML и CSS - Форумы SitePoint
пробуждение689
#1
Firefox (в Windows), похоже, не распознает стиль границы: вставка; (а также канавка, ребро и начало), как видно (по иронии судьбы) на этой странице разработчика Mozilla - вышеупомянутые стили границ правильно отображаются в Google Chrome, но не в Forefox (все в Windows 10).
Я гуглил, но ничего не нашел по этому поводу. Не верится, что это баг, который я и никто другой еще не видел? Кто-нибудь знает что-нибудь об этом?
головка
#2
Привет, wake689,
Я не могу говорить о Windows 10, но могу сказать, что Firefox 85 правильно отображает стили границ на Windows 7 и Linux Mint.
пограничный тест729×279 10,1 КБ
Вот мой тестовый код…
<голова>
<мета-кодировка="utf-8">
Тест границ Firefox 85
<стиль медиа="экран">
тело {
цвет фона: #f0f0f0;
шрифт: обычный 1em / 1.62em без засечек;
}
ч2 {
размер шрифта: 1.5em;
вес шрифта: нормальный;
выравнивание текста: по центру;
}
#контейнер{
дисплей: гибкий;
flex-wrap: обернуть;
выравнивание содержимого: пространство вокруг;
}
#контейнер div{
ширина: 23%;
набивка: 1em;
поле: 0.5em 0;
box-sizing: граница-коробка;
ширина границы: 1em;
цвет границы: #000;
фон: #fff;
выравнивание текста: по центру;
}
# контейнер div: nth-child (1) {
стиль границы: сплошной;
}
# контейнер div: nth-child (2) {
стиль границы: пунктирный;
}
#контейнер div:nth-child(3) {
стиль границы: пунктир;
}
#контейнер div:nth-child(4) {
бордюр: двойной;
}
#контейнер div:nth-child(5) {
бордюрный стиль: канавка;
}
# контейнер div: nth-child (6) {
стиль границы: вставка;
}
#контейнер div:nth-child(7) {
стиль границы: начало;
}
#контейнер div:nth-child(8) {
бордюр: ребристый;
}
<тело>
Тест границ Firefox 85
<дел>
сплошной
точечный
пунктир
двойной
канавка
вставка
начало
гребень
головка
4 лайка
wake689
#3
головка:
Я не могу говорить за Windows 10, но могу сказать, что Firefox 85 правильно отображает стили границ в Windows 7 и Linux Mint.
Как ни странно - этот код, сохраненный в виде файла .html на моем рабочем столе, тоже работает. Но это не так:
image3000×2000 526 КБ
Это должно показать, как работает страница для точек:
image3000×2000 529 КБ
PaulOB
#4
пробуждение689:
с. Но это не так:
Проблема с демонстрацией MDN заключается в том, что они не определили цвет границы, поэтому вы получаете текущий цвет (текущий цвет — по сути, унаследованный от цвета в элементе body в этом примере) для всех 4 границ, что делает его сплошным. Если вы откроете devtools и установите цвет границы, например красный (или даже черный), тогда вставка и начало будут отображаться правильно. Или, альтернативно, удалите цвет с тела в devtools, и граница волшебным образом появится
Обратите внимание, что демонстрация @cootehead на самом деле показывает противоположные результаты и хром в Windows и MAC, поскольку обе платформы показывают 4 нижних примера в демонстрации сплошными со всех сторон.
Снимок экрана 2021-01-28 с разрешением 12.31.212295×298 35,3 КБ
И ПК, и Mac показывают то же самое, что и это изображение.
Однако проблема в Chrome заключается просто в том, что выбранный цвет рамки был черным, а Chrome, похоже, не поддерживает черный цвет. Если вы измените цвет на другой, вы получите результаты в обоих браузерах.
Снимок экрана 2021-01-28 с разрешением 12.26.272300×285 35,5 КБ
Обратите внимание, что исторически стили границ никогда не были согласованы между браузерами, поскольку спецификации допускали некоторую свободу действий в их реализации.
Я поместил код @coothead в кодовую ручку для простоты проверки.
Да, у него есть навык, которого у меня, к сожалению, нет.
головка
2 нравится
система
закрыто
#7
Эта тема была автоматически закрыта через 91 день после последнего ответа. Новые ответы больше не допускаются.
Границы (Каскадные таблицы стилей: Полное руководство)
Каскадные таблицы стилей: полное руководство
граница элемента — это просто линия (иногда более одной), которая
окружает содержимое и заполнение элемента. Таким образом, фон
элемента остановится на внешнем краю границы, так как
фон не заходит на поля, а граница просто
внутри поля. Спецификация CSS строго подразумевает, что
фон простирается до внешнего края границы, так как он говорит
о границах, проводимых «поверх фона
element", но, похоже, не все браузеры с этим согласны. Это важно
потому что некоторые границы "прерывисты" - для
например, точечный и пунктирный стили -- и элементы
фон должен появиться в промежутках между видимыми частями
границы.
Каждая граница имеет три аспекта: ширину или толщину; его стиль,
или внешний вид; и его цвет. Значение по умолчанию для ширины
граница средняя, которая явно не определена
но обычно получается два или три пикселя. Несмотря на это,
причина, по которой вы обычно не видите границ, заключается в том, что стиль по умолчанию
отсутствует, что препятствует их существованию. Если
граница не имеет стиля, то она может и не существовать, поэтому она
нет. Отсутствие стиля границы также сбрасывает ширину,
но мы вернемся к этому через некоторое время.
Наконец, цвет границы по умолчанию — это цвет переднего плана
сам элемент. Если цвет границы не объявлен, то он
будет того же цвета, что и текст элемента. Если, с другой
стороны, элемент не имеет текста — скажем, таблица, которая
содержит только изображения -- то благодаря тому, что цвет
наследуется, цвет границы для этой таблицы будет цветом текста
его родительский элемент. Скорее всего это BODY,
DIV или другая ТАБЛИЦА. Таким образом, если
изображение имеет границу, а BODY является его родителем,
учитывая это правило:
КОРПУС {цвет: фиолетовый;}
, то по умолчанию рамка вокруг изображения будет фиолетовой. Из
Конечно, чтобы эта граница появилась, вам нужно немного поработать
первый.
7.4.1. Бордюры со стилем
Поговорим
сначала о стиле границы, потому что это самое важное
часть границы. Это самое важное не потому, что оно контролирует
внешний вид границы, хотя и делает это, но поскольку
без стиля вообще не было бы границы.
бордюр
Значения
нет | пунктирная |
пунктир | твердый |
двойной | канавка |
хребет | вставка |
начало
Исходное значение
нет
По наследству
нет
Относится к
все элементы
ПРЕДУПРЕЖДЕНИЕ
Для CSS1 требуется поддержка только сплошных
согласие.
Существует девять различных стилей для
свойство border-style, определенное в CSS1, в том числе
значение по умолчанию - нет. Они демонстрируются
на рис. 7-29.
Рисунок 7-29. Стили каймы
СОВЕТ
Самый интересный стиль бордюра — двойной.
Он определяется таким образом, что ширина двух линий плюс
ширина промежутка между ними равна величине
border-width (обсуждается в следующем разделе).
Однако в спецификации не сказано, является ли одна из строк
должны быть толще, чем другие, или если они должны быть одинаковыми
ширина, или если пространство должно быть толще или тоньше, чем линии.
Все эти вещи оставлены на усмотрение пользовательского агента.
Все границы, показанные на рис. 7-30, основаны на
серый цвет, который делает все эффекты
проще увидеть. Внешний вид бордюра всегда каким-то образом основан
по цвету границы, хотя точный метод может отличаться
между пользовательскими агентами. Например, Рисунок 7-30
иллюстрирует два различных способа рендеринга
врезная граница.
Рисунок 7-30. Два допустимых способа рендеринга вставки
Итак, давайте предположим, что вы хотите определить стиль границы для
изображения, находящиеся внутри гиперссылки. Вы можете сделать их начальными, так что
они имеют вид «приподнятой кнопки», как показано на
Рисунок 7-31:
A:link IMG {border-style: outset;}
Рисунок 7-31. Применение начальной рамки к гиперссылке
Опять же, цвет границы зависит от значения элемента
для цвета, который в данном случае, скорее всего,
быть синим (хотя мы не можем показать это в печати). Это связано с
тот факт, что изображение содержит гиперссылку, и
основной цвет гиперссылок обычно синий. Если
мы так хотели, мы могли бы изменить этот цвет, чтобы быть
серебро, вот так:
Как показано на рис. 7-32, граница теперь основана на
светло-серый серебристый, так как теперь это
цвет переднего плана изображения -- даже если изображение
на самом деле не использует этот цвет, он все еще передается
границы. Мы поговорим о другом способе изменения границы
цвета в следующем разделе.
Рисунок 7-32. Изменение цвета рамки
7.4.1.1. Несколько стилей
Также можно определить больше
чем один стиль для данной границы. Например:
Результат, показанный на рис. 7-33, представляет собой абзац.
со сплошной верхней границей, пунктирной правой границей, пунктирной нижней
граница и сплошная левая граница.
Рисунок 7-33. Несколько стилей границ для одного элемента
Опять же, мы видим порядок значений сверху-справа-снизу-слева. Это только
например, возможность устанавливать разные поля с несколькими значениями. Все
те же правила относительно
ценность
репликация применяется к стилям границ, так же как и к полям и
обивка. Таким образом, следующие два утверждения будут иметь один и тот же
эффект, как показано на рисунке 7-34:
Если вам интересно, в CSS1 нет способа
напрямую задайте стиль только для одной стороны, используя что-то вроде
border-top-style, так как такого свойства нет в
CSS1 (хотя это свойство и ему подобные были введены в
CSS2). Однако вы можете обойти это ограничение, объявив
стиль для данной границы с использованием одного из сокращенных свойств
мы обсудим позже в этой главе.
7.4.1.2. Возвращение к твердости
В CSS есть одна интересная вещь, которая может усложнить жизнь
для авторов. Согласно CSS1, пользовательский агент может интерпретировать
любое значение border-style (кроме
нет) как твердое. Из-за этого
допущение, пользовательский агент, технически совместимый с CSS1, может
отображать следующее как сплошное:
P. new3 {border-style: ridge dashed double;}
Результат, показанный на рис. 7-35, не будет
то, что имел в виду автор, конечно, но это технически
правильный. Пока никто и
solid поддерживаются, и любые другие допустимые значения
интерпретируются как твердые, этого достаточно, чтобы
быть совместимым с CSS1. Соответственно, несмотря на то, что Navigator 4.x не
сделать пунктирным и пунктирным
границы, так как он делает их сплошными,
ведет себя не плохо.
Рисунок 7-35. Использование сплошной вместо нераспознанных стилей границ
Вы могли заметить, что все примеры в этом разделе
границы одинаковой ширины. Это потому что мы
не определял ширину, поэтому по умолчанию использовалось определенное значение.
Далее мы узнаем об этом дефолте и многом другом.
более.
7.4.2. Ширина границы
Один раз
вы назначили стиль, следующий шаг в настройке границы
это дать ему некоторую ширину. Это делается с помощью свойства
ширина рамки. Вы также можете использовать один из двоюродных
характеристики:
граница-верхняя ширина,
граница справа ширина,
ширина кнопки границы и
граница слева ширина.
Каждый
из них
используется для установки ширины на определенной стороне границы, конечно, так же, как
со свойствами маржи.
ширина границы
Значения
[ тонкий | средний |
толстый | <длина> ]{1,4}
Исходное значение
не определено для сокращенных свойств
По наследству
№
Относится к
все элементы
ширина верхней границы, ширина правой границы, ширина нижней границы, ширина левой границы
Значения
тонкий | средний |
толстый | <длина>
Исходное значение
средний
Унаследовано
нет
Относится к
все элементы
Существует четыре способа задать ширину границы: вы можете задать
значение длины, такое как 4px или
0. 1em или используйте один из трех
ключевые слова. Эти ключевые слова
тонкий , средний (по умолчанию
значение) и толстый. Эти ключевые слова не
обязательно соответствуют какой-либо конкретной ширине, но просто определяются
по отношению друг к другу. Согласно спецификации,
толстый всегда шире, чем
среда, которая, в свою очередь, всегда шире, чем
тонкий.
Однако точная ширина не определена, поэтому один пользовательский агент может
установите их равными 5px ,
3px и 2px, а другой
устанавливает их равными 3px , 2px и
1 пикс. Какую бы ширину ни использовал пользовательский агент для каждого
ключевое слово, оно будет одинаковым во всем документе, независимо от
обстоятельства. Если среда такая же, как
2px , тогда граница средней ширины всегда будет
два пикселя шириной, независимо от того, окружает ли граница
h2 или элемент P. На рис. 7-36 показан один из способов обработки этих трех
ключевые слова, а также то, как они соотносятся друг с другом и с содержанием
они окружают.
Рисунок 7-36.
Отношение ширины границ друг к другу
Предположим, что абзац имеет поля, цвет фона и
набор стилей границы, как показано на рисунке 7-37:
P {поле: 5px; цвет фона: серебро; border-style: solid;}
Рисунок 7-37. Поля, фон и границы
Ширина рамки по умолчанию средняя ,
как мы можем видеть на рисунке 7-37. Мы можем изменить это на
результат на рисунке 7-38 выглядит следующим образом:
P {поле: 5px; цвет фона: серебро;
стиль границы: сплошной; border-width: Thick;}
Рисунок 7-38. Изменение ширины границы
Можно довести до довольно нелепых крайностей, например, установить
20-пиксельные границы, как показано на рисунке 7-39:
P {поле: 5px; цвет фона: серебро;
стиль границы: сплошной; border-width: 20px;}
Рисунок 7-39. Увеличение ширины границы до недопустимого уровня
Все, как и ожидалось: сочетание стиля и ширины создает
граница, цвет которой основан на цвете переднего плана элемента.
Также можно установить
ширины отдельных сторон. Готово
двумя знакомыми способами. Первый заключается в использовании какого-либо конкретного
свойства, упомянутые в начале раздела, такие как
граница-нижняя-ширина. Другой способ - использовать значение
репликация
в ширине границы. Оба они проиллюстрированы в
Рисунок 7-40.
Рисунок 7-40. Повторение значений и неравномерная ширина границ
7.4.2.1. Никакой границы вообще
До сих пор мы только говорили
о том, что происходит, когда вы используете видимый стиль границы
например, сплошной или начальный. Вещи
тем не менее, становится интересно, когда стиль границы установлен на
никто:
P {поле: 5px; бордюрный стиль: нет; border-width: 20px;}
Как видно на рис. 7.41, несмотря на то, что
ширина границы была установлена равной 20px , когда
стиль установлен на none, не только
стиль границы исчезает, как и ее ширина! Почему?
Рисунок 7-41.
Невероятная исчезающая граница
Если вы помните, терминология, использованная в предыдущем
раздел заключался в том, что граница со стилем none
не существует. Эти слова были тщательно подобраны, потому что они помогают
объясните, что здесь происходит. Поскольку граница не
существует, он не может иметь никакой ширины, поэтому ширина автоматически
установить на 0 (ноль). Это может показаться совершенно
назад, но на самом деле это имеет большой смысл. Ведь если
стакан для питья пуст, вы не можете описать это как
быть наполовину заполненным ничем. Можно только обсуждать глубину
содержимое стакана, если в нем действительно есть содержимое. Точно так же
говорить о ширине границы имеет смысл только в контексте
границ, которые существуют.
Это важно иметь в виду, поскольку распространенной ошибкой является
забудьте объявить стиль границы. Это приводит ко всем типам авторов
разочарование, потому что на первый взгляд стили кажутся правильными.
результатом, тем не менее, является абзац без рамки:
P {поле: 5px; border-width: 20px;}
Поскольку значение по умолчанию для стиля границы равно
нет, неспособность объявить стиль
так же, как объявление стиля границы:
никто. Поэтому, если вы хотите, чтобы появилась граница,
вам нужно выбрать стиль и объявить его.
7.4.3. Цвета границ
По сравнению
к другим аспектам границ, установка цвета довольно проста. В
CSS1, есть единственное свойство border-color,
который может принимать до четырех значений цвета одновременно.
цвет рамки
Значения
<цвет>{1,4}
Исходное значение
значение для элемента
По наследству
нет
Относится к
все элементы
Если имеется менее четырех значений,
ценность
репликация
вступает в силу. Итак, если вы хотите, чтобы элементы h2 имели
тонкие черные верхние и нижние границы с толстыми серыми боковыми границами и
средний, серые рамки вокруг элементов P, это
достаточно, как мы можем видеть на рис. 7-42:
h2 {граница: сплошная; ширина границы: тонкая толстая; цвет границы: черный серый;}
P {стиль границы: сплошной; border-color: серый;}
Рисунок 7-42. Границы имеют много аспектов
По умолчанию ко всем четырем сторонам применяется одно значение цвета,
как с абзацем в предыдущем примере. С другой стороны, если
вы указываете четыре значения цвета, вы можете получить разные цвета для каждого
сторона. Можно использовать любой тип значения цвета, от именованных цветов до
шестнадцатеричные значения и значения RGB.
P {стиль границы: сплошной; ширина границы: толстая;
border-color: black rgb(25%,25%,25%) #808080 silver;}
На рис. 7-43 показаны различные оттенки серого для
границы. Благодаря оттенкам серого в этой книге я
придерживаясь в основном оттенков серого, но можно использовать любой цвет. Если
вы хотели h2 с красным, зеленым, синим и
желтая рамка, это просто:
h2 {стиль границы: сплошной; border-color: red green blue yellow;}
Рисунок 7-43.
Одна рамка, много цветов
Как обсуждалось ранее, если цвета не определены, по умолчанию
color — цвет переднего плана элемента. Таким образом, следующее
декларация будет отображаться, как показано на рисунке 7-44:
P.shade1 {стиль границы: сплошной; ширина границы: толстая; цвет: серый;}
P.shade2 {стиль границы: сплошной; ширина границы: толстая; цвет: серый;
border-color: black;}
Рисунок 7-44. Цвета границ на основе переднего плана элемента (вверху) и значения свойства border-color (внизу)
В результате первый абзац имеет серую рамку,
взято значение серого из цвета переднего плана
сам абзац. С другой стороны, второй абзац содержит
черная рамка, потому что этот цвет был явно назначен с помощью
цвет границы.
7.4.4. Сокращенные свойства границ
Хотя приятно иметь
сокращенные свойства, такие как цвет границы и
пограничный стиль, их не всегда много
помощи. Например, вы можете установить все h2
элементы должны иметь толстую, серую сплошную границу, но только вдоль
нижний. Есть два способа сделать это:
h2 {border-bottom-width: толстый; /* Опция 1 */
стиль границы: нет сплошной;
цвет границы: серый;}
h2 {border-width: 0 0 толстый; /* вариант №2 */
стиль границы: нет сплошной;
border-color: grey;}
Ни то, ни другое не очень удобно, учитывая необходимость набора текста.
К счастью, есть лучшее решение:
h2 {border-bottom: сплошной серый цвет;}
Это применит значения только к нижней границе, как показано на
Рисунок 7-45, оставив для остальных значения по умолчанию.
Поскольку стиль границы по умолчанию отсутствует, границы отсутствуют.
появляются на трех других сторонах элемента.
Рисунок 7-45. Сокращенные свойства упрощают стили
Как вы уже догадались, таких свойств всего четыре.
стенография
характеристики.
верхняя граница, правая граница, нижняя граница, левая граница
Значения
<ширина границы> || <стиль границы> || <цвет>
Исходное значение
см. индивидуальные свойства
По наследству
нет
Относится к
все элементы
Можно использовать эти свойства для создания сложных
границы, как показано на рис. 7-46:
Как видите, порядок фактических значений на самом деле не
иметь значение. Следующие три правила дадут точно такую же границу,
как показано на рис. 7-47:
Рис. 7-47. Получение одного и того же результата тремя различными способами
Вы также можете исключить некоторые значения и использовать их значения по умолчанию,
как это:
h4 {цвет: серый; border-bottom: 3px solid;}
Поскольку цвет границы не объявлен, значение по умолчанию (значение
вместо переднего плана элемента) применяется, как мы можем видеть в
Рисунок 7-48. Просто помните, что если вы пропустите
стиль границы, значение по умолчанию none будет
чтобы ваша граница не появлялась вообще.
Рисунок 7-48. Позволить значениям по умолчанию заполнить промежутки
Напротив, если вы установите только стиль, вы все равно получите рамку.
Например, предположим, что вам просто нужен стиль границы
пунктир для вершины элемента и готовы
чтобы ширина по умолчанию была средней, а цвет
наследоваться от самого элемента. Все что нужно в таком случае
заключается в следующем:
P.roof {border-top: пунктир;}
Следует также отметить, что поскольку каждый из этих
свойства «пограничной стороны» применяются только к определенной стороне,
нет никакой возможности тиражирования значения - это
не будет иметь никакого смысла. Может быть только один из каждого типа
значение: то есть только одно значение ширины, только одно значение цвета и только
один стиль границы. Так что не пытайтесь объявить более одного значения
тип:
h4 {граница: тонкая толстая сплошная фиолетовая;} /* два значения ширины -- НЕВЕРНО */
В таком случае все заявление будет недействительным и должно быть
вообще проигнорил.
Наконец, вам необходимо принять обычные меры предосторожности с помощью стенографии.
свойства: если вы опустите значение, будет заполнено значение по умолчанию
автоматически. Это может иметь непредвиденные последствия. Рассмотрим
следующий:
h5 {стиль границы: пунктирная сплошная двойная;}
h5 {border: medium green;}
Это приведет к тому, что элементы h5 не будут иметь рамки
вообще, потому что отсутствие бордюрного стиля во втором правиле означает
что будет использоваться значение по умолчанию none. В качестве
мы видели, что это полностью отключит границу.
7.4.4.1. Установка границ как можно быстрее
Со всеми
эти стенограммы, вы, вероятно, начинаете подозревать, что
это идет еще дальше, и вы правы. Наконец мы подошли к
самая короткая сокращенная граница свойства всех: граница.
граница
Значения
<ширина границы> || <стиль границы> || <цвет>
Исходное значение
см. индивидуальные свойства
По наследству
нет
Относится к
все элементы
Преимущество этого свойства в том, что оно очень компактно, хотя
краткость вводит несколько ограничений. Прежде чем мы будем беспокоиться об этом,
давайте посмотрим, как используется граница. Если хочешь
все элементы h2 должны иметь толстую серебристую рамку,
это очень просто. Это объявление будет отображаться, как показано
на рис. 7-49:
h2 {граница: толстая сплошная серебристая;}
Рис. 7-49. Очень короткая пограничная декларация
Значения применяются ко всем четырем сторонам. Это, безусловно,
предпочтительнее следующей лучшей альтернативы, которая будет:
h2 {верхняя граница: толстая сплошная серебристая;
нижняя граница: толстое серебристое тело;
правая граница: толстое серебристое тело;
border-left: толстый серебристый сплошной;} /* то же, что и предыдущая разметка */
Недостаток границы в том, что вы можете только
определить «глобальные» стили, ширину и цвета. В других
слова, значения, которые вы указываете для границы, будут применяться
на все четыре стороны поровну. Если вы хотите, чтобы границы были другими
для одного элемента вам нужно будет использовать некоторые другие
пограничные свойства. Конечно, можно повернуть
каскад в вашу пользу:
Второе правило переопределяет значение ширины левой границы
задается по первому правилу, тем самым заменяя толстые
с 20px, как мы видим на рисунке 7-50.
Рисунок 7-50. Использование каскада в своих интересах
7.4.5. Границы и встроенные элементы
Много
этой истории покажется довольно знакомой, потому что она в основном
то же самое, что мы обсуждали с полями и встроенными элементами.
Во-первых, независимо от того, насколько толстыми вы сделаете свои границы на
встроенные элементы, высота строки элемента не изменится.
Давайте установим верхнюю и нижнюю границы для текста, выделенного жирным шрифтом:
Опять же, это разрешено в спецификации, но будет иметь
абсолютно не влияет на высоту строки. Однако, поскольку границы
видны, они будут нарисованы -- как вы сами видите в
Рисунок 7-51.
Рисунок 7-51. Границы встроенных элементов
Границы должны куда-то идти. Вот куда они пошли.
Опять же, все это верно только для верхней и нижней сторон
встроенные элементы; левая и правая стороны это отдельная история.
Мы начнем с рассмотрения простого случая небольшого встроенного
элемент в одну строку, как показано на рис. 7-52.
Рисунок 7-52. Встроенный элемент
Здесь, если мы установим значения для левой или правой границы, не только
они будут видны, но будут смещать текст вокруг себя, т.к.
мы видим на рисунке 7-53:
B {граница слева: 10px двойной серый; фон: серебристый;}
Рисунок 7-53. Строковый элемент с левой границей
Как и ожидалось, на рис. 7-53 показано небольшое дополнительное пространство.
слева от встроенного элемента и без дополнительного пространства над или
под этим.
С рамками, как и с полями, вычисления браузера
для разрыва строки не зависят напрямую от каких-либо
коробка
набор свойств для встроенных элементов. Единственный эффект заключается в том, что пространство
занятые границами, могут немного сдвигать части строки,
что, в свою очередь, может изменить, какое слово находится в конце строки. Повернуть
на Рисунок 7-54, чтобы увидеть, что происходит, когда встроенный
элемент с рамкой отображается в несколько строк:
B {граница: 3 пикселя сплошного серого цвета; фон: серебристый;}
Рисунок 7-54. Встроенный элемент с границей, отображаемой на нескольких строках текста
На рис. 7-54 левая граница применяется к
начало элемента, а правая граница — к его концу.
Границы не обязательно применяются в этом
мода; они также могут быть применены к правой и левой стороне каждого
строку в элементе, если этого требует ситуация. За
например, рифленая граница может выглядеть лучше, заключенная в каждой строке
конец, как показано на рис. 7-55.
Рисунок 7-55. Встроенный элемент с рамкой, отображаемой на нескольких строках текста, с закрытыми рамками
Также допустимо, чтобы строки были «открытыми», т. к.
показано на рис. 7-54.
ПРЕДУПРЕЖДЕНИЕ
Границы не могут быть применены к встроенным элементам в
Навигатор 4.x или
Исследователь
4.х/5.х. Только Opera 3.x рисует границы вокруг
встроенные элементы, и он закрывает только начало и конец
элемент. Это согласуется со спецификацией CSS, хотя
здесь это не обсуждается (см. главу 8, «Визуальное форматирование»,
подробнее).
7.4.6. Границы: известные проблемы
Конечно, есть несколько проблем с использованием границ. Большинство
огорчает тот факт, что Navigator 4.x не рисует границу
вокруг области содержимого блочного элемента, но вместо этого вставляет
некоторое пространство между содержимым и границей. Там нет
кажется, любой способ переопределить это поведение.
Несмотря на свои ограничения, граница, очевидно,
очень полезное свойство. Его можно использовать даже для того, чтобы обойти то, что кажется
как совершенно не связанная с этим ошибка в Netscape Navigator 4.x. если ты
назначить цвет фона элементу, а затем просмотреть его в
Navigator 4.x, цвет будет только
появляются за буквами в тексте и не покрывают весь
область содержимого и отступы. Вы можете обойти это, объявив:
граница {0.1px сплошная нет;}
Несмотря на то, что граница не появится, и этого не должно быть
иметь какое-либо отношение к фоновым цветам, это приведет к тому, что Navigator
4.x для заливки фона области содержимого назначенным
цвет.
Говоря о Навигаторе, крайне опасно устанавливать
границы — или любые другие свойства блока — на
встроенные элементы. Это так же верно для
границы, как и для полей, и почти то же самое
причины.
Когда дело доходит до CSS, иногда граница на самом деле не является границей .
В этом выпуске мы расскажем о различиях между:
граница
контур
коробка-тень
Мы также обсудим, когда вы можете использовать один вместо другого.
Повторный курс по боксовой модели CSS
#
Ключевое различие между нашими тремя методами границ заключается в том, где они размещаются на элементе и как они влияют на его размеры. Это поведение контролируется блочной моделью CSS.
граница — это именно граница элемента, расположенная между его отступом и полями, и ее ширина будет влиять на вычисляемые размеры элемента
контур находится рядом с границей , но за ее пределами, перекрывая box-shadow и margin , но не влияя на размеры элемента
по умолчанию, box-shadow простирается от края границы, покрывая пространство в определенном направлении (направлениях), и это также не влияет на размеры элемента
граница Синтаксис и использование
#
Рамки были стандартом дизайна с самого начала Интернета.
Важным отличием от двух других методов, которые мы рассмотрим, является то, что по умолчанию границы включаются в вычисляемые размеры элемента. Даже если вы установите box-sizing: border-box , границы все равно будут учитываться при расчете.
Наиболее важный синтаксис для границы определяет ее ширину и стиль:
граница: сплошная 3 пикселя;
Если не определено, цветом по умолчанию будет currentColor , что означает, что будет использоваться ближайшее определение для цвета в каскаде.
Но для границы доступно больше стилей, и с помощью border-style вы можете определить разные стили для каждой стороны, если хотите.
Посетите документацию MDN, чтобы просмотреть все доступные значения в стиле границ и посмотреть примеры.
Когда использовать
граница
#
Граница
— хороший выбор (каламбур), когда допустимо, чтобы стиль вычислялся в размерах элемента. А стили по умолчанию дают большую гибкость дизайна.
Продолжайте читать, чтобы получить бонусный совет о том, что может сделать только граница !
схема Синтаксис и использование
#
Для контуров единственным обязательным свойством, чтобы сделать его видимым, является предоставление стиля, поскольку значение по умолчанию равно 9.0004 нет :
контур: сплошной;
Как и граница, она получит цвет через currentColor , а ее ширина по умолчанию будет medium .
Типичное применение схемы — собственные стили браузера для :focus интерактивных элементов, таких как ссылки и кнопки.
Это конкретное приложение должно быть разрешено в целях доступности, если вы не можете предоставить пользовательский :focus стиль, соответствующий критерию успеха WCAG 2. 4.7 Focus Visible.
В целях проектирования часто упоминаемая проблема с контуром заключается в том, что он не может наследовать кривую от любых стилей радиуса границы .
Когда использовать
схема
#
Использование контура может быть желательным, когда вы не хотите влиять на размеры элемента, и вам не нужно, чтобы он следовал радиусу границы . Бывает так, что используются те же значения стиля, что и для границы, поэтому вы можете добиться похожего вида.
box-shadow Синтаксис и использование
#
Минимальные требуемые свойства для box shadow — это значения для осей x и y и цвет:
box-shadow: 5px 8px черный;
При необходимости добавьте третий блок для создания размытия и четвертый для добавления распространения .
Посмотрите мой 4,5-минутный демо-видео на Egghead, чтобы узнать больше о расширенном синтаксисе, а также советы по использованию коробка-тень .
Чтобы использовать его для создания границы, мы устанавливаем значения осей x и y , а также размытие на 0 . Затем установите положительное число для распространения :
box-shadow: 0 0 0 3px синий;
Это создаст видимость границы вокруг элемента и , он может даже следовать примененному радиусу границы :
Когда использовать
box-shadow
#
Вы можете предпочесть box-shadow , особенно если вы хотите анимировать границу, не вызывая смещения макета. В следующем разделе будет продемонстрирован пример этого контекста.
А поскольку box-shadow можно накладывать слоями, это хороший универсальный инструмент для улучшения ваших макетов.
Однако он не сможет полностью имитировать некоторые стили, предоставляемые границами и контурами .
Собираем все вместе
#
Вот несколько практических сценариев, в которых вам может понадобиться использовать альтернативу border .
Бордюр для кнопок
#
Обычный случай, когда реальная граница становится проблемой, — это предоставление стилей как для кнопок с рамкой, так и для кнопок без рамки, а также сценарий их выстраивания рядом друг с другом.
Типичным решением обычно является увеличение размеров кнопок без рамки, равных border-width .
Альтернативное решение с нашими новыми знаниями состоит в том, чтобы использовать box-shadow вместе с ключевым словом inset для визуального размещения псевдограницы внутри кнопки:
Обратите внимание, что ваш отступ должен быть больше ширины границы , чтобы предотвратить перекрытие текстового содержимого .
В качестве альтернативы, возможно, вы хотите добавить границу к :hover или :focus . Использование настоящих border , у вас будет нежелательный визуальный скачок от смещения макета, так как border ненадолго увеличит размеры в этих состояниях.
В этом случае мы можем использовать box-shadow для создания псевдограницы, чтобы истинные размеры не увеличивались, плюс мы можем анимировать ее с помощью перехода :
Вот сокращенный код приведенного выше примера:
кнопка { переход: box-shadow 180 мс облегчение; }
button:hover { box-shadow: 0 0 0 3px tomato; }
Обновление метода отладки CSS
#
Классическая шутка CSS заключается в том, что для выяснения проблем CSS, особенно для прокрутки или позиционирования, нужно добавить:
* { граница: 1 пиксель сплошной красный; }
Добавляет красную рамку к каждому элементу.
Но, как мы узнали, это также повлияет на их вычисляемые размеры, таким образом, потенциально случайно вызовет у вас дополнительные проблемы.
Вместо этого используйте:
* { контур: 1 пиксель сплошной красный; }
Популярная викторина : где будет размещен контур и почему это лучшее решение?
Одним из возможных последствий использования границы является добавление полос прокрутки после перерисовки содержимого. Этот побочный эффект не произойдет при использовании контура .
Кроме того, вы, вероятно, уже используете границу для элементов, поэтому повсеместно меняйте border вызовет сдвиг макета, что, безусловно, может привести к новым проблемам.
Дополнительное примечание : Инструменты разработчика браузера также разработали более сложные методы, помогающие вам идентифицировать элементы, а Firefox даже добавил теги «прокрутка» и «переполнение», которые полезны в случае отладки для переполнения. Я призываю вас потратить некоторое время на изучение функций DevTool!
Обеспечение видимого фокуса
#
Для специальных возможностей один сценарий, о котором вы можете не знать, — это пользователи режима высокой контрастности Windows (WHCM).
В этом режиме предоставленные вами цвета убираются до уменьшенной высококонтрастной палитры. Разрешены не все свойства CSS, в том числе box-shadow .
Одним из практических последствий является то, что если вы удалили контур вместо :focus и заменили его box-shadow , пользователям WHCM больше не будет даваться видимый фокус.
Чтобы устранить это негативное влияние, вы можете применить прозрачный контур к :focus :
Чтобы узнать больше об этом конкретном вопросе, просмотрите эпизод, посвященный стилю кнопок.
Подводные камни
контур и box-shadow
#
Поскольку контур и box-shadow находятся на за пределами границы в блочной модели, одним из последствий, с которым вы можете столкнуться, является их исчезновение под краями области просмотра. Таким образом, вам может понадобиться добавить margin для элемента или padding для тела в качестве контрмеры, если вы хотите, чтобы он оставался видимым.
Их размещение также означает, что они могут быть обрезаны такими свойствами, как overflow: hidden или использование clip-path .
Дополнительный совет: градиентные границы
#
Как и было обещано, вот бонусный совет о том, что из методов, которые мы обсуждали, может сделать только border .
Часто забываемая пограничная собственность граница изображения .
elementBorderStyle {
border-style: solid;
}
elementBorderStyle {
border-style: ridge;
}
На данный момент свойство поддерживается во всех основных браузерах.
style.borderStyle
Вид зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселей.
Однако, он также работает с 
Facebook
Вы можете ей предоставить 4 значения, это стили верхней, правой, нижней и левой сторон. 
Вы можете предоставить ему 4 значения, это цвета для верхней, правой, нижней и левой сторон.
Следующий шаг в эволюции CSS | by Workafrolic (±∞) | Web Standards
Просто представьте несколько элементов с 
Как только мы свыкнемся с методологией строка-блок, станет легче разобраться с размерами. Для английского языка свойство 
Ещё нет нормальной документации, но они работают над этим! 🙂
В большинстве случаев он будет идти сверху вниз, но, как уже упоминалось, для некоторых языков он может идти справа налево (японский) или даже слева направо (монгольский). В обоих случаях у нас будет горизонтальная прокрутка, а не вертикальная, как мы привыкли.
Но если сайт построен на новых логических свойствах, то значения будут расшифрованы так: 
К сожалению, браузеры пока отказываются понимать это свойство внутри медиавыражений.
Я буду признателен, если вы поаплодируете или поделитесь этим постом 🙂
Если не установлено 
Расстояние между точками не определяется спецификацией и зависит от реализации. Радиус точек равен половине вычисленного значения ширины границы той же стороны 
Это противоположность канавке 
SDAD. Включите JavaScript для просмотра данных.
Inset {
