CSS
контуры
Поиск…
Синтаксис
- контур: контурная линия с контуром-контуром | начальная | наследовать;
- ширина: средняя | тонкий | толстый | длина | начальная | наследовать;
- контурный стиль: нет | скрытый | пунктирный | пунктирный | твердый | двойной | паз | гребень | вставка | начало | начальная | наследовать;
параметры
| параметр | подробности |
|---|---|
| пунктирный | пунктирная линия |
| пунктирная | пунктирный контур |
| твердый | сплошной контур |
| двойной | двойной контур |
| паз | Трехмерный рифленый контур, зависит от значения цвета контура |
| хребет | Трехмерный ребристый контур, зависит от значения контурного цвета |
| вставка | 3D-схема вставки, зависит от значения цвета контура |
| боковик | 3D outset outline, зависит от значения цвета контура |
| никто | нет набросков |
| скрытый | скрытый контур |
замечания
outline теперь описана в основном пользовательском интерфейсе , уровне 3 модуля CSS (он уже был описан в REC CSS2.1)
Свойство Outline определено по умолчанию в браузерах для настраиваемых элементов в :focus состоянии :focus .
Его не следует удалять, см. Http://outlinenone.com, в котором говорится:
Что делает свойство контура?
Он обеспечивает визуальную обратную связь для ссылок, которые имеют «фокус» при навигации по веб-документу с использованием клавиши TAB (или эквивалента). Это особенно полезно для людей, которые не могут использовать мышь или иметь визуальное ухудшение. Если вы удалите контур, вы делаете свой сайт недоступным для этих людей. (...)
Интересные связанные примеры переполнения стека:
обзор
Контур - это линия, проходящая вокруг элемента, за пределами границы. В отличие от border , контуры не занимают места в коробке. Поэтому добавление контура элемента не влияет на положение элемента или других элементов.
Кроме того, контуры могут быть непрямоугольными в некоторых браузерах. Это может произойти, если outline применяется к элементу span который содержит текст с различными свойствами font-size внутри него. В отличие от границ, контуры не могут иметь закругленные углы.
Существенными частями outline являются outline-color , outline-style и outline-width .
Определение контура эквивалентно определению границы:
Контур - это линия вокруг элемента. Он отображается по краю элемента. Однако он отличается от пограничной собственности.
outline: 1px solid black;
план-стиль
Свойство outline-style используется для установки стиля контура элемента.
p {
border: 1px solid black;
outline-color:blue;
line-height:30px;
}
.p1{
outline-style: dotted;
}
.p2{
outline-style: dashed;
}
.p3{
outline-style: solid;
}
.p4{
outline-style: double;
}
.p5{
outline-style: groove;
}
.p6{
outline-style: ridge;
}
.p7{
outline-style: inset;
}
.p8{
outline-style: outset;
}
HTML
<p class="p1">A dotted outline</p>
<p class="p2">A dashed outline</p>
<p class="p3">A solid outline</p>
<p class="p4">A double outline</p>
<p class="p5">A groove outline</p>
<p class="p6">A ridge outline</p>
<p class="p7">An inset outline</p>
<p class="p8">An outset outline</p>
