English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
(outline) Линия контура - это линия, нарисованная за пределами внешнего края рамки элемента (например, кнопки, активного поля формы и т.д.), чтобы сделать его более выделенным.
контур обычно используется для подчеркивания элементов. Контур на первый взгляд очень похож на рамку, но в следующих аспектах он отличается от рамки:
контур не занимает места, потому что они всегда помещаются в верхнюю часть рамки элемента, что может привести к их перекрытию другими элементами на странице.
в отличие от рамки, контур не позволяет нам установить разные ширину для каждого края, также не позволяет установить разные цвета и стили для каждого края. Контур во всех отношениях одинаковый.
контур, кроме перекрытия, не оказывает никакого влияния на окружающие элементы.
в отличие от рамки, контур не изменяет размер или положение элемента.
контур может не быть прямоугольным.
Примечание：Если контур размещен на элементе, то он займет такое же пространство на веб-странице, как будто у элемента нет контура.
outline-width свойство определяет ширину контура, который нужно добавить к элементу. Значение должно быть CSS длиной (px, pt, em и т.д.) или одним из разрешенных ключевых слов, но百分比 или отрицательные значения не допускаются. Какborder-widthимущество одинаково.
p {
outline-width: thick;
}Проверьте, как это выглядит‹/›Примечание：Если outline-width отсутствует или не указано значение, то будет использоваться значение по умолчанию (medium).
Этот outline-style атрибут устанавливает стиль контура, например: solid, dotted и т.д.
Этот атрибут может принимать одно из следующих значений: none, hidden, dashed, dotted, double, groove, inset, outset, ridge и solid. Какborder-styleзначения одинаковы.
none: не определяет контур.
dotted: определяет пунктирный контур
dashed: определяет пунктирный контур
solid: определяет твердый контур
double: определяет два контура. Ширина обоих контуров одинакова по значению ширины контура
groove: определяет 3D канавочный контур. Эффект зависит от значения цвета контура
ridge: определяет 3D гребневой контур. Эффект зависит от значения цвета контура
inset: определяет 3D вставной контур. Эффект зависит от значения цвета контура
outset: определяет начальный 3D контур. Эффект зависит от значения цвета контура
p {
outline-style: double;
}Проверьте, как это выглядит‹/›outline-color свойство устанавливает цвет контура.
p {
outline-style: solid;
outline-color: #0000ff;
}Проверьте, как это выглядит‹/›Вы также можете установить outline-color в transparent.
Примечание：outline-color Если используется отдельно, это свойство не будет действовать. Сначала установите outline-style.
Свойство outline CSS является шорткотом для установки одного или нескольких отдельных свойств контура outline-style, outline-width и outline-color в одном правиле.
p {
outline: 5px solid #9acd32;
}Проверьте, как это выглядит‹/›Если при установке шорткода контура пропущено или не указано значение отдельного свойства контура, outline будет использовать значение по умолчанию для этого свойства (если оно есть).
Примечание：outline-colorЕсли при установке контура элемента отсутствует значение свойства или свойство не указано (например, outline: 5px solid;), то у элементаcolorСвойство будет использоваться в качестве значения outline-color.
В следующем примере контур будет черной сплошной линией шириной 5px:
p {
color: black;
outline: 5px solid;
}Проверьте, как это выглядит‹/›Но в случаеoutline-styleПропуск значения не покажет никакой контуровой линии, так как значение по умолчанию для свойства outline-style - none.
В следующем примере轮廓 не будет:
p {
outline: 5px #00ff00;
}Проверьте, как это выглядит‹/›Предупреждение： Интернет-Explorer 7 и более ранние версии не поддерживают свойство outline. Outline в IE8 только<!DOCTYPE>Эта свойство поддерживается только при указании a.
Свойство outline используется широко для удаления пунктирной линии вокруг активной ссылки.
a, a:acive, a:focus {
outline: none; /* Works in Firefox, Chrome, IE8 and above */
}Проверьте, как это выглядит‹/›