outline-style в CSS


Содержание

outline | CSS

Генератор outline CSS

Свойство outline (w3.org) — контур (не путать с контуром букв text-shadow). Очень похож на border.

? положительное число в любых единицах измерениях, но не в процентах

? положительное или отрицательное число в любых единицах измерениях, но не в процентах

Особенности outline

Ⅰ. outline не увеличивает коробку элемента
. наведите на outline.

Ⅱ. при переносе строк
получается такой вот контур
интереснее всего выглядящий в IE

Ⅲ. если у дочернего блока (потомка) position: static; или z-index ниже либо равен значению родителя, то outline родителя перекрывает его:

Ⅳ. outline ложиться и поверх нижестоящего/вышестоящего в коде элемента. Искл. при работе со свойством position и с overflow родителя.

Примеры

Как убрать обводку/рамку с input, textarea, ссылки a

У некоторых тегов HTML outline присутствует по умолчанию.

Нажмите на эту ссылку и вернитесь обратно. Она в Firefox приобрела такой вид. Очень удобно. Для того, чтобы удалить обводку

Поставьте курсор на поле . В Chrome оно теперь выделено (подсвечено) примерно так . Дабы избавиться от этой рамки

При фокусе на input остальное пространство темнеет, становится менее выражено

CSS полупрозрачная рамка вокруг картинки

Самый простой способ на края изображения наложить полупрозрачный фон

CSS outline-style

The CSS outline-style property is used to specify the style 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.

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

Syntax

The outline-style property accepts most of the same values that border-style accepts, with a couple of exceptions (noted below).

Outlines vs Borders

Borders allow a different style to be applied to each side of the box, but outlines don’t allow this. With outlines, all four sides share the same outline.

Also, borders allow a value of hidden but this is not valid for outline styles.

Details on these values 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.

CSS Outline

Свойства CSS Outline

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

Илон Маск рекомендует:  TrimRight - Функция Delphi

В 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 — Определяет скрытый контур

В следующем примере сначала устанавливает тонкую черную рамку вокруг каждого

элемента, то он показывает различные outline-style значения:

пример

p <
border: 1px solid black;
outline-color: red;
>

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»
  • Инверсия — выполняет инверсию цветов (который гарантирует, что контур виден, независимо от цвета фона)

пример

A colored outline.

Outline Ширина

outline-width свойство определяет ширину контура.

Ширина может быть установлен в качестве определенного размера (в px, pt, cm, em , и т.д.) , либо с помощью одного из трех предопределенных значений: тонкий, средний или толстый.

пример

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

outline-style

The outline-style property is used to set the style 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-style 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: none
  • Applies To: all elements
  • Animatable: no
  • Values

    Notes

    The following image shows the result of applying any of the above styles to an element’s border.

    The rendering of the predefined outline styles.

    Not all browsers may render the styles the same way. Chrome, for instance, currently renders the dots as rectangular dots not circular ones.

    The specification does not specify the amount of spacing between the dots and the dashes. Browser implementations are encouraged to choose a spacing that makes the corners symmetrical.

    The specification also does not define how outlines of different styles should be joined in the corner.

    The color of outline drawn for values of groove , ridge , inset , and outset depends on the element’s outline color property, but browsers may choose their own algorithm to calculate the actual colors used. For instance, if the outline-color has the value silver , then a browser could use a gradient of colors from white to dark gray to indicate a sloping outline.

    Examples

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

    Илон Маск рекомендует:  ins в HTML

    Live Demo

    The following demo sets the outline style on boxes (

    Browser Support

    The outline-style 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 4, 2015 at 3:56 pm by Mary Lou.

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

    A Complete Tutorial to Master Styling Properties of CSS Outline

    TL;DR – The CSS outline property adds a line outside an HTML element. Outlines never take up space because they are always on top of the box of the element.

    This element has a 1px black border and a light purple outline with a width of 15px.

    Contents

    CSS Outline: Main Tips

    • The CSS outline is a line drawn around an element, outs >

    The CSS outline property surrounds an element with a line outside the border. It does not affect the layout, position, or size of the element since it does not take space.

    Note: the outline CSS is useful when you need to emphasize search terms, delete dotted lines around active links, and highlight links without using hover

    The outline CSS shorthand defines all the following properties for the element box outline in one declaration:

    Property Description
    outline-color Sets the outline color
    outline‑offset Defines the space between the element’s edge or border and an outline
    outline-style Specifies the outline style
    outline-width Sets the outline width

    This example sets all properties for color, width, and style:

    This paragraph has a 6px dotted outline 0.5 cm away from the border edge.

    CSS Outline vs Border

    Outlines and borders appear to be similar in their features and definitions. However, here are the main points to remember to know the solution to the CSS outline vs border problem:

    • Outlines always add lines on all sides of the element, while borders on different sides can be set separately.
    • Outlines do not belong to the CSS box model. Therefore, it does not affect the element layout.
    • Outlines do not follow border-radius.
    • Outlines are not always rectangular, but they usually are.

    Shapes Other Than Rectangular

    Outlines do not have to be rectangular, but this fact does not mean you can create circles or other shapes.

    Differently than borders, the outline property considers edges as well. If the outlined element continues for multiple lines, the outline ends at the end of the line and starts on the next line again.

    Since outline attempts to be fully-connected, it generates a non-rectangular shape.

    outline-style

    The CSS outline-style property defines the graphic style of outlines.

    The outline-style property can have a variety of keyword values:

    A dotted outline.

    A dashed outline.

    A double outline.

    A solid outline.

    A groove outline. The effect depends on the outline-color value.

    A ridge outline. The effect depends on the outline-color value.

    A inset outline. The effect depends on the outline-color value.

    A outset outline. The effect depends on the outline-color value.

    A none outline.

    A hidden outline.

    In this example, we set a CSS outline to text element

    , and show it with the different outline-style values:

    Copy Chrome default input’s outline style

    How can I set the default Chrome input’s outline style (on focus, the orange one), so it looks the same in every browser? Chrome style seems to be textarea:focus , however it doesn’t work (there is no auto for outline-style for other browsers).

    6 Answers 6

    convert to this

    Don’t know if my solution is good enough for you, but so far, i don’t know any other way. I do it like this:

    With Chrome 60 the outline is now blue.

    The auto style of outline creates a one pixel outline, with the corners «notched».

    This can be achieved using ::before and ::after rules like so:

    The first rule changes the border color.

    The second rule provides a top and bottom border that starts one pixel in from the left and ends one pixel in from the right.

    The thirder rule provides a left and right border that starts one down from the top, and ends one pixel up from the bottom.

    CAVEAT: the containing element must be explicitly «position: relative» in order for the ::before/::after absolute positioning to work.

    The classname «someclass-focus» is meaningless. it just has to be applied/removed whenever you want the pseudo focus outline to appear/disappear.

    You can’t, really.

    Chrome uses the ‘auto’ outline-style (whatever that may mean) and that isn’t according to the CSS3 specs.

    Your best option is to create your own highlight styling and (and at least) overwrite the outline-style. That way all browsers will have the same focus element for your page.

    Copying the chrome style is very hard to do. Since css by default doesn’t support a shadow-like outline, only solid, dashed, etc styles are supported. You will have to mimick it using box-shadow, however, this will, for some odd reason, cause the border of the input box to show (in inset style), which forces you to define the border of the input box.

    You could do something like this for example:

    Outline-style в CSS

    Css module of single purpose classes for outlines

    917 156 156
    bytes selectors declarations

    Import the css module

    Then process the CSS using the tachyons-cli

    The built CSS is located in the css directory. It contains an unminified and minified version. You can either cut and paste that css or link to it directly in your html.

    The source CSS files can be found in the src directory. Running $ npm start will process the source CSS and place the built CSS in the css directory.

    Свойство outline

    Свойство outline задаёт дополнительную рамку вокруг элемента, за пределами его CSS-блока. Поддерживается во всех браузерах, IE8+.

    Для примера, рассмотрим его вместе с обычной рамкой border :

    • В отличие от border , рамка outline не участвует в блочной модели CSS. Она не занимает места и не меняет размер элемента. Поэтому его используют, когда хотят добавить рамку без изменения других CSS-параметров.
    • Также, в отличие от border , рамку outline можно задать только со всех сторон: свойств outline-top , outline-left не существует.

    Так как outline находится за границами элемента – outline -рамки соседей могут перекрывать друг друга:

    В примере выше верхняя рамка нижнего элемента находится на территории верхнего и наоборот.

    Все браузеры, кроме IE9-, также поддерживают свойство outline-offset , задающее отступ outline от внешней границы элемента:

    Ещё раз заметим, что основная особенность outline – в том, что при наличии outline-offset или без него – он не занимает места в блоке.

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

    outline | CSS

    Генератор outline CSS

    Свойство outline (w3.org) — контур (не путать с контуром букв text-shadow). Очень похож на border.

    ? положительное число в любых единицах измерениях, но не в процентах

    ? положительное или отрицательное число в любых единицах измерениях, но не в процентах

    Особенности outline

    Ⅰ. outline не увеличивает коробку элемента
    . наведите на outline.

    Ⅱ. при переносе строк
    получается такой вот контур
    интереснее всего выглядящий в IE

    Ⅲ. если у дочернего блока (потомка) position: static; или z-index ниже либо равен значению родителя, то outline родителя перекрывает его:

    Ⅳ. outline ложиться и поверх нижестоящего/вышестоящего в коде элемента. Искл. при работе со свойством position и с overflow родителя.

    Примеры

    Как убрать обводку/рамку с input, textarea, ссылки a

    У некоторых тегов HTML outline присутствует по умолчанию.

    Нажмите на эту ссылку и вернитесь обратно. Она в Firefox приобрела такой вид. Очень удобно. Для того, чтобы удалить обводку

    Поставьте курсор на поле . В Chrome оно теперь выделено (подсвечено) примерно так . Дабы избавиться от этой рамки

    При фокусе на input остальное пространство темнеет, становится менее выражено

    CSS полупрозрачная рамка вокруг картинки

    Самый простой способ на края изображения наложить полупрозрачный фон

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

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

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

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

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

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

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

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

    Илон Маск рекомендует:  Более внимательный взгляд на промежуточный язык (il)
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL