Как сделать скругление outline

Добавил пользователь Алексей Ф.
Обновлено: 05.10.2024

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

CSS имеет следующие свойства структуры:

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

Примечание: Контур отличается от границ! В отличие от границы, контур рисуется за пределами границы элемента и может перекрывать другое содержимое. Кроме того, контур не является частью размеров элемента; Общая ширина и высота элемента не зависит от ширины контура.

Стиль контура

Свойство outline-style задает стиль структуры и может иметь одно из следующих значений:

• dotted - Определяет пунктирную структуру
• dashed - Определяет пунктирную структуру
• solid - Определяет сплошной контур
• double - Определяет двойной контур
• groove - Определяет трехмерную контурную канавку
• ridge - Определение трехмерного ребристого контура
• inset - Определяет контур 3D-вставки
• outset - Определение трехмерного контура начала
• none - Не определяет структуру
• hidden - Определяет скрытый контур

В следующем примере показаны различные значения outline-style :

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.

Пример

Примечание: Никакие другие свойства структуры не будут иметь никакого эффекта, если не задано свойство outline-style !

Цвет контура

Свойство outline-color используется для задания цвета контура.

Цвет может быть установлен:

В следующем примере показаны некоторые различные контуры с различными цветами. Также обратите внимание, что эти элементы также имеют тонкие черные границы внутри контура:

Сплошной красный контур.

Двойной зеленый контур.

Вначале желтый контур.

Пример

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

p.ex2 border: 1px solid black;
outline-style: double;
outline-color: green;
>

p.ex3 border: 1px solid black;
outline-style: outset;
outline-color: yellow;
>

В следующем примере используется outline-color: invert , который выполняет инверсию цвета. Это гарантирует, что контур будет виден, независимо от цвета фона:

Сплошной инвертированный контур.

Пример

Ширина контура

Свойство outline-width задает ширину структуры и может иметь одно из следующих значений:

• thin (typically 1px)
• medium (typically 3px)
• thick (typically 5px)
• A specific size (in px, pt, cm, em, etc)

В следующем примере показаны некоторые очертания с различной шириной:

A medium outline.

A thick outline.

A 4px thick outline.

Пример

p.ex1 <
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
>

p.ex2 border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium;
>

p.ex3 border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thick;
>

p.ex4 border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: 4px;
>

Структура-Сокращенное свойство

Свойство outline является сокращенным свойством для задания следующих отдельных свойств структуры:

• outline-width
• outline-style (Обязательно)
• outline-color

Свойство outline задается как одно, два или три значения из приведенного выше списка. Порядок значений не имеет значения.

В следующем примере показаны некоторые контуры, заданные с помощью сокращенного свойства outline :

A dashed outline.

A dotted red outline.

A 5px solid yellow outline.

A thick ridge pink outline.

Пример

Смещение контура

Свойство outline-offset добавляет пространство между контуром и краем/границей элемента. Пространство между элементом и его контуром прозрачно.

В следующем примере указывается структура 15пкс за пределами границы:

Этот абзац имеет контур 15пкс за пределами края границы.

Пример

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

Этот абзац имеет контур 15пкс за пределами края границы.

Пример

p <
margin: 30px;
background: yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
>

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

Свойство border-radius может содержать от одного до четырёх значений, разделяемых между собой пробелами. От количества значений зависит то, как будут установлены радиусы скругления углов. Если указывается более одного значения, скругление углов устанавливается начиная с верхнего левого угла:

• border-radius: 5px 10px 15px 20px; (4 значения)
  1. Верхний левый – 5px
  2. Верхний правый – 10px
  3. Нижний правый – 15px
  4. Нижний левый – 20px

• border-radius: 10px 20px 15px; (3 значения)
  1. Верхний левый – 10px
  2. Верхний правый и нижний левый – 20px
  3. Нижний-правый – 15px

• border-radius: 15px 5px; (2 значения)
  1. Верхний левый и нижний правый – 15px
  2. Верхний правый и нижний левый – 5px

• border-radius: 13px; (1 значение)
  1. Радиус для всех четырёх углов – 13px

Овальные скругления

CSS свойство border-radius также позволяет сделать скругление углов ввиде дуги овала, а не круга:

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

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

Каждая из двух частей (до слэша и после него) подчиняется тем же правилам, что и при создании круглых скруглений. Это означает, что каждая часть может содержать от одного до четырёх значений, разделяемых между собой пробелами. И от количества заданных значений будет зависеть то, как будут установлены радиусы скругления углов. Например, четыре значения перед символом / представляют горизонтальные радиусы для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов. Значения после символа / соответственно представляют вертикальные радиусы для тех же самых углов.

Пример с овальными скруглениями:

• border-radius: 55px 45px 40px / 35px 20px;
  1. Верхний левый – 55px / 35px
  2. Верхний правый и нижний левый – 45px / 20px
  3. Нижний правый – 40px / 35px

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

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

В этом случае все 4 края элемента будут скруглены по 30px.

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

Можно скруглять каждый угол с разными радиусами. Для этого нужно написать

Последовательность этих цифр следующая:

• Верхний левый угол (в примере это 10px)
• Верхний правый угол (в примере это 7px)
• Нижний правый угол (в примере это 0px)
• Нижний левый угол (в примере это 0px)

Чтобы не запоминать какое значение за каким идет можно писать в CSS в отдельности каждый угол

Помимо этого, можно также изменять и радиус для каждого угла в отдельности для горизонтальной и вертикальной плоскостей.

Задание второго радиуса нужно задавать через слэш "/" в случае border-radius или вторым значением рядом в случае прямого указания каждого угла радиуса

Первый параметр отвечает за горизонтальный радиус, второй за вертикальный.

Например, с помощью этих свойств можно сделать эллипс:

Значения 100px 100px 100px 100px / 200px 200px 200px 200px можно было бы написать еще компактнее:

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

Задание толщины, цвета и типа линии при скруглении

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

• Толщина - задается чаще всего в пикселях
• Тип линии может принимать значения:
  • solid (сплошной)
  • dashed (пунктирный)
  • dotted (ряд точек)
  • groove (линия бороздка)
  • inset (вдавленная линия)
  • outset (выдавленная линия)

  Таким образом можно красиво оформлять различные рамки для объявлений, замечаний на сайте.

  Свечение для скругления

  Помимо задания толщины, цвета и типа линии можно также задавать и свечении рамки. Делается это с помощью свойства box-shadow

  Мы приводили всегда в качестве примеров тег

  . Но таким же образом можно скруглять и table, img, iframe. Чтобы скруглить края у этих элементов нужно всего лишь в стилях CSS элемента прописать border-radius .

  Браузеры
  Старые браузеры могут не поддерживать свойство border-radius . Так, IE ниже 9 версии, Firefox ниже 4 не отображают закругления. Необходимо прописывать вендорные префиксы CSS:

  Что-то вроде border на стероидах. Не влияет на размеры элемента, можно отодвинуть от границ на любое расстояние.

  Присутствует в стандартных стилях браузера для акцента на сфокусированных интерактивных элементах. Типа размеры не меняются, вёрстка страницы не ломается, но пользователь наглядно видит, какой элемент в фокусе. Ситуация win-win!

  
  

  Естественно, можно задавать это свойство любому элементу и без всяких фокусов 😏

  Пример

  Добавим элементу обводку, которая будет отодвинута от края на 10 пикселей. Для этого мы используем дополнительное свойство outline-offset . Оно идёт рука об руку с outline .

  Как пишется

  outline на самом деле шорткат — короткое свойство для записи сразу нескольких значений. Внутри себя оно содержит свойства outline-width , outline-style и outline-color .

  Разберём доступные значения для каждого из свойств, а потом соберём всё в одну коробку:

  outline-width

  • Ключевые слова thin , medium , thick — задают тонкую, среднюю или толстую ширину. Значения в пикселях на усмотрение браузера, но обычно соответствует 1, 3 и 6 пикселям соответственно.
  • Конкретный размер — размер в любых единицах измерения, доступных в вебе. Например, 10px или 0.2em .

  outline-style

  • none — обводка не отображается, даже если задано значение для outline-width .
  • dotted — обводка будет состоять из точек. Круглых точек, вроде такого •••••
  • dashed — обводка будет в виде пунктирной линии.
  • solid — значение по умолчанию, если не задано иное. Сплошная линия.
  • double — двойная сплошная линия.

  Дальше создателей спецификации понесло в творчество и они придумали несколько фигурных обводок. Освещение таких рамок идёт сверху под прямым углом. И на это никак не повлиять:

  • groove — обводка будет отображаться так, будто рамка объёмная, с вдавленной серединой и подсвечена. Цвет обводки (если он отличен от чёрного) станет двухцветным.
  • ridge — обводка отобразится объёмной, её центр будет приподнят. Противоположно groove .
  • inset — объёмная рамка, края направлены внутрь элемента.
  • outset — объёмная рамка, края направлены наружу элемента, противоположно inset .

  Проще всего понять на примерах:

  outline-color

  • любое доступное значение цвета в вебе, включая ключевые слова transparent , currentColor
  • invert — ключевое слово, устанавливающее противоположный цвету фона элемента цвет обводки. Удобно для достижения максимальной контрастности.

  Собираем все значения в шорткат.

  Указано одно обязательное значение для outline-style :

  outline-color | outline-style | outline-width :

  Как можно понять из примера выше, для свойства outline можно задать только одно значение, указывающее на стиль обводки. Без него обводка не будет отображаться. Если задано только одно значение, то цвет будет совпадать с цветом текста (подражание ключевому слову currentColor ), а размер будет соответствовать ключевому слову medium (что, в свою очередь, равно 3 пикселям).

  Заодно посмотрим на доступные значения для outline-offset :

  • Может принимать в качестве значения любое указание размера в любых единицах измерения. Можно задать отрицательное значение и тогда обводка будет сдвинута внутрь. Тогда стоит учитывать ширину самой обводки, поскольку свойство outline-offset указывает расстояние от края элемента до внутреннего края обводки.

  Подсказки

  💡 В отличие от border обводка всегда квадратная (прямоугольная), её углы нельзя скруглить. На сентябрь 2021 года обводка подстраивается под форму обводимого элемента! 🥳 Во всех актуальных версиях браузеров, кроме Safari 😤

  💡 Обводка без зазрения совести накладывается на рядом стоящие элементы, не замечая их.

  💡 Если задать обводку для многострочного текста, то каждая строка будет обведена своим прямоугольником. Лучше уж задать обводку для родителя.

  На практике

  Алёна Батицкая

  🛠 Если вам не нравится обводка у элементов при фокусе, то не сбрасывайте её совсем, а попросите дизайнера или придумайте более уместный для вашего сайта стиль.

  🛠 При помощи сочетания border и outline можно создать множественную рамку вокруг элемента.

  Читайте также:

    
  • Как сделать подшивку в автокаде
    
  • Как сделать так чтобы подруга ответила в ватсапе
    
  • Как сделать рыбные шарики
    
  • Как сделать повязку на ногу при вывихе
    
  • Как сделать трещетку в фл студио