outline-width в CSS

outline-w >

Свойство CSS outline-width используется для указания толщины контура элемента.

Вместо свойства outline-width можно применять outline. Также в описании этого свойства вы можете прочитать об отличиях рамки (border) от контура.

Тип свойства

Применяется: ко всем элементам.

Значения

Значением свойства outline-width является указание толщины контура одним из следующих вариантов.

  • Размер — указывается в относительных или абсолютных единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Отрицательные значения недопустимы.
  • thin — тонкий контур.
  • medium — средний контур.
  • thick — толстый контур.
  • inherit — наследует значение outline-width от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: medium.

Синтаксис

Пример CSS: использование outline-width

Результат. Использование свойства CSS outline-width.

CSS | Свойство outline-width

Outline — это линия, которая создается вокруг указанного элемента за пределами границы элемента, чтобы выделить конкретное и его легче различить.

Свойство outline-width используется для указания ширины этого контура для конкретного элемента.

Свойство outline-style должно быть объявлено или использовано до того, как свойство outline-width будет использовано для нужного элемента. Логически элемент должен иметь схему, для которой определяется или стилизуется ширина.

Контур элемента отображается вокруг поля элемента и не совпадает со свойством border. Поскольку контур не является частью размеров элемента, свойства ширины и высоты элемента не содержат ширину контура.

Синтаксис :

Значения :

    средний: это значение устанавливает ширину контура по умолчанию. Ширина контура тоньше, чем набор контуров, толще и толще, чем контур, заданный тонким.

CSS outline-width Свойство

Пример

Задайте ширину контура:

Подробнее примеры ниже.

Определение и использование

Контур представляет собой линию, которая рисуется вокруг элементов (за пределами границ), чтобы сделать элемент «выделиться».

outline-width задает ширину контура.

Примечание: Всегда объявляйте свойство стиль структуры перед outline-width свойством. Элемент должен иметь контур перед изменением его ширины.

Значение по умолчанию: medium
Inherited: no
Animatable: yes, see individual properties. Читайте о animatable
Version: CSS2
Синтаксис JavaScript: object.style.outlineW

Советы и примечания

Контур — это линия вокруг элемента. Он отображается вокруг поля элемента. Однако он отличается от свойства Border.

Структура не является частью размеров элемента, поэтому свойства Width и Height элемента не содержат ширину контура.

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Илон Маск рекомендует:  Google maps api работаем с информационными окнами
Свойство
outline-width 1.0 8.0 1.5 1.2 7.0

Синтаксис CSS

Значения свойств

Значение Описание
medium Задает средний контур. Это значение по умолчанию
thin Задает тонкий контур
thick Задает толщину контура
length Позволяет определить толщину контура. Читать о единицах длины
initial Присваивает этому свойству значение по умолчанию. Читайте о initial
inherit Наследует это свойство из родительского элемента. Читайте о inherit

Другие примеры

Пример

Установите ширину контура в среднее (по умолчанию):

СSS Свойство outline-width

Пример

Установить ширину контура:

Определение и использование

Контур — это линия, которая рисуется вокруг элементов (вне границ), чтобы элемент «выделялся».

Свойство outline-width задает ширину контура.

Примечание: Всегда объявляйте свойство outline-style перед свойством outline-width . Элемент должен иметь контур, прежде чем изменять его ширину.

Значение по умолчанию: medium
Унаследованный: нет
Анимируемый: да, см. раздел отдельные свойства. Прочитать о animatable Попробовать
Версия: CSS2
JavaScript синтаксис: object.style.outlineW Попробовать

Советы и примечания

Контур — это линия вокруг элемента. Он отображается вокруг поля элемента. Однако он отличается от пограничного свойства.

Свойство outline не является частью размеров элемента, поэтому свойства элемента width b height не содержат ширину контура.

Поддержка браузеров

Числа в таблице указывают первая версия браузер, который полностью поддерживает свойство.

Свойство
outline-width 1.0 8.0 1.5 1.2 7.0

CSS Синтаксис

Значения свойств

Значение Описание Воспроизвести
medium Задает средний контур. Это показатель Воспроизвести »
thin Задает тонкий контур Воспроизвести »
thick Задает толстый контур Воспроизвести »
length Позволяет определить толщину контура. Прочитать о Eдиницы длины Воспроизвести »
initial Устанавливает это свойство в значение индекса. Прочитать о initial Воспроизвести »
inherit Наследует это свойство от родительского элемента. Прочитать о inherit

Примеры

Пример

Установитm ширину контура на средний (это индекс):

CSS свойство outline-width

Свойство outline-width определяет толщину линии элемента.

Имеет следующие значения — medium, thick, thin.

Сначала необходимо установить свойство outline-style, а дальше — outline-width.

Значение по умолчанию medium
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Да. Толщина линии анимируема.
Версия CSS2
DOM синтаксис Object.style.outlineW ;

Синтаксис

Пример

Пример, где первый элемент не имеет границ, а у второго имеются границы. Заметьте, что рамка второго элемента находится за пределами его границы:

CSS outline-width Property

Description

The outline-width CSS property sets the width of the outline of an element. However in many cases the shorthand CSS propertiey outline is more convenient to use and preferable.

The following table summarizes the usages context and the version history of this property.

Default value: medium
Applies to: All elements
Inherited: No
Animatable: Yes. See animatable properties.
Version: CSS 2, 3

Syntax

The syntax of the property is given with:

outline-width : thin | medium | thick | length | initial | inherit

The example below shows the outline-width property in action.

Example

  • p <
  • outline-style : solid ;
  • outline-width : thick ;
  • >
Илон Маск рекомендует:  Реализация алгоритмов шифрования

Note: You must declare the outline-style property before the outline-width property. An element must have outlines before you can set the width of the outline, because the default value of the outline-style property is none .

Property Values

The following table describes the values of this property.

Value Description
thin A thin outline.
medium A medium outline.
thick A thick outline.
length A length value in px , em , etc. Negative values are not allowed.
inherit If specified, the associated element takes the computed value of its parent element outline-width property.

Browser Compatibility

The outline-width property is supported in all major modern browsers.

Basic Support—

  • Firefox 1.5+
  • Google Chrome 1+
  • Internet Explorer 8+
  • Apple Safari 1.2+
  • Opera 7+

Warning: Internet Explorer 7 and earlier versions don’t support the outline-width property. IE8 however supports this property, but requires a valid .

outline-width

Браузер Internet Эксплорер Нетscape Опера Safari Файер фох
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Нет Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS (ЦСС) CSS (ЦСС)2, CSS (ЦСС)2.1
Значение по умолчанию medium
Наследуется Нет
Применяется Ко всем элементам
Аналог ШТМЛ Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/ui.ШТМЛ#propdef-outline-width

Описание

Задает толщину внешней границы элемента. В отличие от атрибута border-width , для outline-width нельзя устанавливать границу для каждой стороны элемента индивидуально.

Чтобы outline-width работал, необходимо установить у атрибута outline-style любое значение кроме none .

Синтаксис

outline-width: thin | medium | thick | значение

Значения

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Результат примера показан на рис. 1.

Рис. 1. Использование атрибута outline-width

Свойство CSS outline-width

p
<
outline-style:dotted;
outline-width:5px;
>

Описание и использование

Свойство CSS outline задает стиль рамки (outline), которая находится за пределами границ элемента и предназначена для выделения элемента.

Свойство CSS outline-width задает ширину всех четырех внешних границ элемента.

Заметка: Всегда задавайте свойство outline-style перед настройкой outline-width. У элемента должна быть видимая внешняя граница, чтобы можно было изменить ее ширину.

Значение по умолчанию medium
Наследование нет
Версия CSS CSS 2
Синтаксис JavaScript object.style.outlineW

Поддержка в браузерах

Свойство outline-width поддерживается всеми основными браузерами.

Заметка: свойство outline-width работает верно в Internet Explorer 8 (и выше), только если указан Doctype.

CSS outline-w >

The CSS outline-width property is used to specify the width of an element’s outline.

Unlike an element’s border (e.g. set using border or its associated properties), an element’s outline does not take up extra space and it can be non-rectangular.

The outline is always on top of a box, and it does not influence the position or size of the box, or of any other boxes. Therefore, displaying or suppressing outlines does not cause reflow or overflow.

Илон Маск рекомендует:  Что такое код domnode &#62;append_sibling

User agents typically render an outline on elements in the :focus state.

Syntax

These values are explained below.

Possible Values

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Example Code

Accessibility Considerations

The CSS spec warns against removing the outline on elements in the :focus state:

Keyboard users, in particular people with disabilities who may not be able to interact with the page in any other fashion, depend on the outline being visible on elements in the :focus state, thus authors must not make the outline invisible on such elements without making sure an alternative highlighting mechanism is provided.

outline-width

The outline-width property is used to set the width of an element’s outline .

An outline is a line that is drawn outside the borders of an element to make it stand out on the page. It is usually used for accessibility reasons, and can be used for decoration purposes. Refer to the outline property entry for more information about outlines, how they differ from borders, and more.

The outline-width property is a longhand property that can be specified as part of the shorthand outline property. It is usually more convenient to set the outline of an element using the shorthand property.

Official Syntax

  • Syntax:
  • Initial: medium
  • Applies To: all elements
  • Animatable: yes, as a length
  • Values

    Notes

    The interpretation of the first three values depends on the browser. The following relationships must hold, however:

    Furthermore, these widths must be constant throughout a document.

    Examples

    The following adds a 2px -width purple outline to input fields when they are focused/tabbed. The color and style of the outline are set using the outline-color and outline-style properties.

    Live Demo

    The following demo sets the outline width on boxes (

    Browser Support

    The outline-width property is supported in all major browsers: Chrome, Firefox, Safari, Opera, and on Android and iOS. In Internet Explorer, the property is supported starting from version 8.

    Further Reading

    Written by Sara Soueidan. Last updated February 3, 2015 at 12:34 pm by Pedro Botelho.

    Do you have a suggestion, question or want to contribute? Submit an issue.

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL