Свойства CSS Outline
Контур представляет собой линию вокруг элемента - за пределами границы. Это можно использовать , чтобы сделать элемент "stand out" .
В CSS outline свойства определяют стиль, цвет и ширину контура.
Этот элемент имеет тонкую черную рамку и двойной контур, который 10px в ширину и зеленый.
CSS Outline
outline является линией , которая обращается вокруг элементов (за пределами границ) , чтобы сделать элемент "stand out" .
Тем не менее, outline свойство отличается от свойства границы - The outline НЕ является частью размеров элемента не давал; общая ширина и высота элемента не зависит от ширины контура.
Outline Стиль
outline-style свойство определяет стиль контура.
outline-style свойство может иметь одно из следующих значений:
-
dotted- Определяет пунктирный контур -
dashed- Определяет контур пунктирную -
solid- Определяет контур твердое -
double- Определяет двойной контур -
groove- Определяет 3D рифленый контур. Эффект зависит от значения очертание цветов -
ridge- Определяет коньковый контур 3D. Эффект зависит от значения очертание цветов -
inset- Определяет 3D врезку контур. Эффект зависит от значения очертание цветов -
outset- Определяет 3D контур начала. Эффект зависит от значения очертание цветов -
none- не определяет контур -
hidden- Определяет скрытый контур
В следующем примере сначала устанавливает тонкую черную рамку вокруг каждого <p> элемента, то он показывает различные outline-style значения:
пример
p {
border: 1px solid black;
outline-color: red;
}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}Результат:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Попробуй сам "  | Примечание: Ни один из других свойств CSS набросков , описанных ниже , не будет иметь никакого эффекта , если outline-style свойство не установлено! |
|---|
цвет контура
outline-color свойство используется , чтобы установить цвет контура.
Цвет может быть установлен с помощью:
- Имя - указать имя цвета, как "red"
- RGB - укажите значение RGB, как "rgb(255,0,0)"
- Hex - задать шестнадцатеричное значение, например "#ff0000"
- Инверсия - выполняет инверсию цветов (который гарантирует, что контур виден, независимо от цвета фона)
пример
p
{
border: 1px solid black;
outline-style: double;
outline-color: red;
}Результат:
A colored outline.
Outline Ширина
outline-width свойство определяет ширину контура.
Ширина может быть установлен в качестве определенного размера (в px, pt, cm, em , и т.д.) , либо с помощью одного из трех предопределенных значений: тонкий, средний или толстый.
пример
p {border: 1px solid black;}
p.one
{
outline-style: double;
outline-color: red;
outline-width: thick;
}
p.two
{
outline-style: double;
outline-color: green;
outline-width: 3px;
}
Результат:
A thick outline.
A thinner outline.
Outline - сокращённое свойство
Для сокращения кода, также можно указать все индивидуальные свойства контурные в одном собственности.
outline свойство свойство является обобщающим для следующих индивидуальных свойств контурных:
-
outline-width -
outline-style(обязательно) -
outline-color
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 »
Все свойства CSS Outline
| Имущество | Описание |
|---|---|
| outline | Устанавливает все свойства контурные в одной декларации |
| outline-color | Устанавливает цвет набросков |
| outline-offset | Задает пространство между контуром и краем или границы элемента |
| outline-style | Устанавливает стиль контура |
| outline-width | Устанавливает ширину контура |