outline в CSS


CSS-разметка — применение outline вместо border

February 21, 2014

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

Однако у свойства есть существенное отличие, которое приобретает очень важное значение при создании разметки. Свойство может быть полезным в процессе создания разметки в качестве удобного средства диагностики.

Во время создания разметки можно визуально обозначить местоположение всех ее частей.

Например, таким образом:

Вы можете решить, что точно так можно сделать и с помощью свойства , но в действительности это не так. Причина заключается в том, что границы ( ) нарушают разметку. А свойство не нарушает ее.

Вот что я имею ввиду: предположим, у вас есть три колонки ‘ов, которые должны располагаться внутри контейнера-родителя с шириной 960px. (Если вам не нравятся пиксели, то можете применить для этой же цели , проценты или любую другую единицу измерения).

Для всех трех ‘ов-потомков устанавливаем правила и попытаемся визуально обозначить местоположение в разметке каждого из блоков.

Если ко всем трем блокам вы добавите свойство , то последний из этих трех опустится вниз и расположиться под двумя первыми:

Это произошло потому, что каждый из трех блоков имеет ширину 320px; помимо этого справа и слева к каждому блоку добавлена граница толщиной в , что делает ширину блока равной, как минимум, .

Умножте это значение ширины на 3 (количество блоков-колонок) и в результате получиться общая ширина 966px, что явно больше ширины блока-родителя 960px. Результат для браузера — сместить последний блок вниз!

Именно по этой причине свойство нарушает разметку. Свойство , с другой стороны, не нарушает ее. С помощью него вокруг элементов рисуется линия; к примеру, в нашем случае все три блока со свойством разместятся друг рядом с другом внутри блока-родителя.

Не имеет значения, какой толщины вы сделаете , блоки никогда не сдвинуться и не нарушат разметку (это касается не только блока , а любого элемента страницы). Линии сделают перекрытие друг друга, как показано на рисунке ниже:

Сразу становится ясно преимущество использования при создании разметки. Если в процессе ее создания вам кажется, что что-то идет не так, вы легко можете “нарисовать” границы интересующего вас элемента, не опасаясь при этом нарушить разметку.

Другое отличие от заключается в том, что “рисуется” обязательно вокруг всего элемента, по всем четырем его сторонам.

Другими словами, вы не можете просто создать левый или же правый , как вы это обычно делаете при работе с границами . Может существовать только граница вокруг всех четырех сторон элемента, и не может быть по другому.

По этой же причине невозможно изменять цвет, ширину или стиль какой-либо одной из сторон элемента. Если необходимо создать границу , то она будет создана таковой вокруг всех сторон элемента.

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

Если элемент также имеет , то эти поля рисуются вокруг границ ; но при этом не изменяют поля и не замещают их.

Автор статьи: Eric Meyer — “Smashing CSS Professional Techniques for Modern Layout”

RxJs — map

Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading

outline

Свойство CSS outline объединяет в себе несколько свойств для создания контура вокруг элемента и указания его стиля, толщины и цвета. Контур располагается сразу за внешним краем рамки элемента (border) и очень на нее похож, но отличается следующим:

  1. Размер контура не влияет на положение и размер самого элемента, то есть контур вообще не учитывается при форматировании страницы, а располагается поверх внешних полей (margin) элемента и/или окружающего контекста.
  2. Контур всегда полностью замкнут, и захватывает периметр сразу всего элемента. То есть, например, если контур указан для встроенного (inline) элемента, который расположен на нескольких строках, то он будет охватывать сразу все эти строки, а не каждую строку в отдельности с разрывами в начале или конце.
  3. Как следствие из второго пункта, контур может быть непрямоугольным, то есть отображаться в виде ломаной.
Илон Маск рекомендует:  Что такое код ibase_fetch_object

На следующем рисунке показано отличие контура от рамки на примере встроенного элемента.

Отличие свойства CSS border от outline.

Тип свойства

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

Значения

Значением свойства outline является ключевое слово inherit либо одно или несколько (через пробел) значений его подсвойств.

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

Значение по умолчанию: зависит от значений по умолчанию каждого подсвойства outline .

Синтаксис

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

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

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:

CSS outline-style Property

Example

Set a style for the outline:

More «Try it Yourself» examples below.

Definition and Usage

An outline is a line that is drawn around elements (outside the borders) to make the element «stand out».

The outline-style property specifies the style of an outline.

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS2
JavaScript syntax: object.style.outlineStyle=»dashed» Try it

Tips and Notes

An outline is a line around an element. It is displayed around the margin of the element. However, it is different from the border property.

The outline is not a part of the element’s dimensions, therefore the element’s width and height properties do not contain the width of the outline.


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

outline

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

IE Opera Chrome Firefox Safari
IE8.0+ + + + +

Пример

Задаем внешнюю границу элемента:

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

Свойство outline задает внешнюю границу вокруг элементов (т.е. за пределами обычной границы). Основная цель данного свойства выделить какой-либо элемент.

Свойство outline объединяет в себе все свойства, которые используются для определения внешней границы (рамки) элемента.

Свойства, которые можно задать (по порядку): outline-color, outline-style, outline-width.

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

Свойство outline-offset

Дата публикации: 2020-05-25

От автора: свойство outline-offset в CSS сдвигает внешнюю обводку с края рамки элемента на указанную величину. Обводка (не рамка) не занимает места на странице (как абсолютно позиционированные элементы), поэтому ее можно сдвинуть на любое значение, и она никак не повлияет на положение или раскладку окружающих элементов.

Обводка задается через свойство outline и часто используется для создания кольца фокусировки для доступности. Свойство outline-offset позволяет изменять положение кольца фокусировки.

Значения

Свойство outline-offset принимает один тип значений, длину:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

любая другая валидная длина в заданных единицах измерения (в том числе отрицательные значения).

Обратите внимание, что outline-offset, как и outline-width, не принимает значения в процентах.

Позиционирование обводки

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

С помощью outline-offset можно изменить положение обводки относительно края рамки. Поиграйтесь с демо ниже, в нем можно интерактивно изменить сдвиг обводки с помощью слайдера. Значение сдвига отображается на странице по время сдвига слайдера:

Как уже было сказано, свойство outline-offset принимает отрицательные значения. Отрицательные значения сдвигают обводку в противоположную сторону (к центру элемента), как показано в интерактивном демо ниже. Обратите внимание, что обводка начинается на -40px:

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

Не входит в сокращение outline

Как и свойство border, свойство outline является сокращением и представляет три свойства: outline-color, outline-style и outline-width.

Свойство outline-offset не используется в сокращениях, поэтому его необходимо объявлять отдельно от самой обводки.

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

Данные взяты с Caniuse. За более подробной информацией перейдите на сайт. Цифра указывает на то, что свойство поддерживается в этой версии и выше.

Индикатор «partial» для IE означает, что IE не поддерживает outline-offset, но поддерживает сокращение outline и три его свойства.

Помимо упомянутого в разделе «позиционирование обводки» бага есть еще один баг в Firefox. Обводка неправильно рисуется, когда у элемента есть дочерний элемент, перекрывающий границы родителя (например, из-за отрицательных margin’ов или абсолютного позиционирования). Поэтому outline-offset будет относиться к расширенной границе, созданной дочерним элементом, а не родителем. Чтобы лучше понять, смотрите CodePen, эту ветку Stack Overflow и баг репорт (благодарим читателя Matt Vanes за отправку бага).

Автор: Louis Lazaris

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

К онтур элемента: Outline

С войство OUTLINE

Свойство Значения Пр* Нc*
outline [ outline-color; outline-style; outline-width ], inherit +
outline-color ЦВЕТ, invert , inherit +
outline-style none , dotted, dashed, solid, double, groove, ridge, inset, outset, inherit +
outline-width thin, medium , thick, ШИРИНА, inherit +

Outline — сокращённая форма записи свойств, которая задаёт общий контур элемента. Контуры не влияют на размещение элементов, они могут быть неправильной формы.

В примере мы задали ширину, стиль и цвет контура элемента «kontur», используя сокращенную форму записи — свойство Outline:


Outline-color

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

• Цвет
invert — автоматически задаёт цвет контура для достижения контраста с окружающим фоном элемента. Однако спецификация CSS 2.1 оставляет «свободу выбора» браузерам, которые обычно используют значение свойства Color, заданное для самого элемента.
inherit — наследование от родительского элемента.

Outline-style

Свойство определяет стиль контура элемента.

none — не отображает контура.
inherit — наследование от родительского элемента.

Остальные значения свойства Outline-style схожи со свойством Border-style, но в отличие от него не влияют на размещение элемента. Иллюстрация наглядно демонстрирует стили контура элемента:

Outline-width

Свойство задает ширину контура элемента, которое работает только в случае, если задан стиль контура — т.е. свойство Outline-style имеет значение отличное от none.

Ширину контура можно указывать в разных единицах, принятых в CSS, удобнее всего в px.

thin — узкая линия, как правило, шириной в 1 px.
medium — средней толщины.
thick — широкая.
inherit — наследование от родительского элемента.

outline-style

Internet Explorer Chrome Opera Safari Firefox Android iOS
8.0+ 1.0+ 7.0+ 2.0+ 1.5+ 1.0+ 1.0+

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

Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Ссылка на спецификацию http://www.w3.org/TR/CSS21/ui.html#propdef-outline-style

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

Значения

Вид указанных стилей представлен на рис. 1.

Рис. 1. Вид границы с разным значением стилей

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 2. В данном примере для браузера IE8 убирается пунктирная граница вокруг ссылок, возникающая при их активации. В первом абзаце рамка еще будет отображаться, а во втором абзаце она скрывается с помощью значения none свойства outline-style .

Рис. 2. Использование свойства outline-style для ссылок

CSS Outline

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

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

элемента, то он показывает различные 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

CSS outline

The CSS outline property is a shorthand property to specify all outline properties.

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

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.

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