Границы Flashcards
outline-offset
(смещение контура)
Устанавливает расстояние между рамкой, созданной с помощью свойства outline, и краем или границей элемента добавленной через border.
outline-offset: -10px;
Значения
<размер>
Задаёт расстояние от края элемента до рамки. Отрицательное значение отображает рамку внутри элемента, положительное — вокруг элемента.
inherit
Наследует значение родителя.
Синтаксис
outline-offset: <размер> | inherit
</размер></размер>
border-image
(граница изображения)
Используется для отображения рисованной рамки вокруг элемента. Толщина рамки задаётся свойством border, при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background, отображается под рамкой.
border-image: url(images/bg-image.png) 30 round round;
Значения
none
Не отображает рисованную рамку, используется установленный стиль границы.
URL
Путь к графическому файлу. Обязательный параметр.
Само изображение для создания рамки продемонстрировано на рис. 1 и состоит из девяти областей: четырёх уголков, верхней, правой, нижней, левой стороны и центральной части, в которой выводится содержимое элемента.
Синтаксис
border-image: none | [ <URL> [<число> | <проценты>]{1,4} [/ <толщина>{1,4}]? ] && [stretch | repeat | round]{0,2}</толщина></проценты></число></URL>
-moz-border-top-colors
-moz-border-right-colors
-moz-border-left-colors
-moz-border-bottom-colors
(цвет верхних границ)
Устанавливает набор цветов для верхней границы элемента. Если граница толще одного пиксела, то можно задать собственный цвет каждой линии пикселов.
-moz-border-top-colors: #ffa02d #fdad41 #fabe5d #f7d17c #f4e298;
Не применяется:
если значение border-style установлено как dashed или dotted;
к таблицам, у которых border-collapse задано как collapse.
Значения
none
Нет цвета или используется цвет, заданный свойством border-color.
цвет
Значение цвета в любом допустимом для CSS формате. Также можно использовать значение transparent для указания прозрачности.
Синтаксис
-moz-border-top-colors: [цвет]* цвет | none
outline-color
(цвет контура)
Указывает цвет внешней границы элемента. В отличие от линии, задаваемой через border, линия через свойство outline отображается вокруг элемента, не влияя на ширину блока или его положение.
outline-color: #be8b5e;
Значения
invert
Автоматически задаёт цвет линии, исходя из фона под ней для достижения максимального контраста. В CSS 2.1 браузеру разрешается игнорировать значение invert и вместо него использовать цвет линии заданный свойством color.
цвет
Задаёт цвет линии в любом допустимом для CSS формате.
inherit
Наследует значение родителя.
Синтаксис
outline-color: invert | цвет | inherit
outline-style
(стиль контура)
Задает стиль внешней границы элемента. В отличие от линии, задаваемой через border, линия через outline отображается вокруг элемента, не влияя на ширину блока или его положение.
outline-style: solid;
Синтаксис
outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
Значения
none
Граница не отображается. Это значение перекрывает свойство outline-width, если оно присутствует.
dotted
Линия состоящая из набора точек.
dashed
Пунктирная линия, состоящая из серии коротких отрезков.
solid
Сплошная линия.
double
Двойная линия.
groove
Создает эффект вдавленной рамки.
ridge
Создает эффект рельефной границы.
inset
Псевдотрехмерная рамка, при которой правая и нижняя граница осветляется, а левая и верхняя линии затемняются.
outset
Псевдотрехмерная рамка, при которой левая и верхяя граница имеют более светлый оттенок, чем заданный цвет, а правая и нижняя линии затемняются.
inherit
Наследует значение родителя.
outline-width
(ширина контура)
Задает толщину внешней границы элемента. В отличие от свойства border-width, для outline-width нельзя устанавливать границу для каждой стороны элемента индивидуально.
outline-width: 3px;
Чтобы outline-width работал, необходимо установить у свойства outline-style любое значение кроме none.
Значения
thin
Тонкая линия. Значение в пикселах может изменяться в зависимости от браузера, но обычно составляет 1 пиксел.
medium
Линия средней толщины (3 пиксела).
thick
Линия большой толщины (6 пикселов).
значение
Для точной установки толщины можно использовать любые единицы размера принятые в CSS.
inherit
Наследует значение родителя.
Синтаксис
outline-width: thin | medium | thick | значение | inherit
outline
(контур)
Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента. В отличие от линии, задаваемой через border, свойство outline не влияет на положение блока и его ширину. Также нельзя задать параметры линии на отдельных сторонах элемента, outline применяется сразу ко всем четырём сторонам.
outline: 1px solid #666;
Значения
outline-color
Задает цвет линии в любом допустимом для CSS формате.
outline-style
Стиль линии.
outline-width
Толщина границы.
inherit
Наследует значение родителя.
Синтаксис
outline: outline-color || outline-style || outline-width | inherit
border-bottom-color
border-left-color
border-right-color
border-top-color
(цвет нижней границы)
Устанавливает цвет границы внизу элемента.
border-bottom-color: white;
Значения
См. цвет
transparent
Устанавливает прозрачный цвет.
inherit
Наследует значение родителя.
Синтаксис
border-bottom-color: цвет | transparent | inherit
border-bottom-style
border-left-style
border-right-style
border-top-style
(стиль границы внизу)
Устанавливает стиль границы внизу элемента.
border-bottom-style: solid;
Значения
none
Линия не отображается и значение ее толщины обнуляется.
hidden
Имеет тот же эффект, что и none за исключением применения border-bottom-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае нижняя граница в ячейке не будет отображаться вообще.
dotted
Линия состоящая из набора точек.
dashed
Пунктирная линия, состоящая из серии коротких отрезков.
solid
Сплошная линия.
double
Двойная линия.
groove
Создает эффект вдавленной линии.
ridge
Создает эффект рельефной линии.
inset
Псевдотрехмерная линия.
outset
Псевдотрехмерная линия.
inherit
Наследует значение родителя.
Синтаксис
border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit
border-bottom-width
border-left-width
border-right-width
border-top-width
(ширина нижней границы)
Устанавливает толщину границы внизу элемента.
border-bottom-width: 7px;
Синтаксис
border-bottom-width: значение | thin | medium | thick | inherit
Значения
Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы внизу. Для более точного значения, толщину можно указывать в пикселах или других единицах. inherit наследует значение родителя.
border-bottom
border-left
border-right
border-top
(нижняя граница)
Свойство позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.
border-bottom: 2px solid white;
Синтаксис
border-bottom: [border-width || border-style || border-color] | inherit
Значения
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений свойства border-style. Их названия и результат действия представлен на рис. 1.
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
inherit наследует значение родителя.
border-color
(цвет границы)
Устанавливает цвет границы на разных сторонах элемента. Свойство позволяет задать цвет границы сразу для всех сторон элемента или только для указанных.
border-color: red white;
Синтаксис
border-color: [цвет | transparent] {1,4} | inherit
border-style
(стиль границы)
Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.
“solid”
border-style: double;
none
Не отображает границу и ее толщина (border-width) задается нулевой.
hidden
Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае вокруг ячейки граница не будет отображаться вообще.
inherit
Наследует значение родителя.
Синтаксис
border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} | inherit
border-width
(ширина границы)
Задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны. Способ изменения толщины зависит от числа значений.
Значения
Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы. Для более точного значения, толщину можно указывать в пикселах или других единицах. inherit наследует значение родителя.
border-width: 3px 7px 7px 4px;
Синтаксис
border-width: [значение | thin | medium | thick] {1,4} | inherit
border
(граница)
Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.
border: 4px double black;
Синтаксис
border: [border-width || border-style || border-color] | inherit
