Отступ внешней рамки outline от рамки border. Свойство outline-offset


Содержание

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

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

CSS синтаксис

Возможные значения

Значение Описание
расстояние Задает величину отступа контура от элемента. Отрицательное значение отображает контур внутри элемента, положительное — вокруг элемента. Значение по умолчанию 0.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Устанавливаем, чтобы контур отстоял от элемента на 15px

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

CSS урок 10. Отступ и граница элемента CSS

Отступы в CSS

Элемент в html — это прямоугольник, для которого можно указать величины внутренних и внешних отступов, а также границу, которая разделяет их.

Отступы в CSS устанавливаются, например, для блочных элементов и таблиц. Рассмотрим основные свойства CSS для установки отступов:

Внешние отступы

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

Свойство:

  • margin-bottom (нижний отступ)
  • margin-left (отступ слева)
  • margin-right (отступ справа)
  • margin-top (верхний отступ)

Значения:

Краткая запись:

margin:margin-top margin-right margin-bottom margin-left; margin:10px 20px 20px 30px;

Пример:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Внутренние отступы

Внутренние отступы в css создаются при помощи свойства padding , которое устанавливает значение полей от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

Свойства:

  • padding-bottom (нижний отступ)
  • padding-left (отступ слева)
  • padding-right (отступ справа)
  • padding-top (верхний отступ)

Значения:

Краткая запись:

padding:padding-top padding-right padding-bottom padding-left; padding:10px 20px 20px 30px;

Пример:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Граница элемента (рамка)

Граница элемента в CSS устанавливается при помощи свойства border .

border-style (стиль границы)

Значения:

  • none (без границы)
  • dotted (из точек)
  • dashed (пунктирная)
  • solid (сплошная)
  • double (двойная)
  • groove (трехмерная)
  • ridge (трехмерная)
  • inset (трехмерная с тенью)
  • outset (трехмерная с тенью)

Пример:

border-width (ширина границы)

Значения:

  • thin (тонкая)
  • medium (средняя)
  • thick (толстая)
  • значение

Пример:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Как надо парту открывать,
Не знала я сначала,
И я не знала, как вставать,
Чтоб парта не стучала.

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Как надо парту открывать,
Не знала я сначала,
И я не знала, как вставать,
Чтоб парта не стучала.

border-color (цвет границы)

Значения:

  • red (цвет)
  • rgb(255,0,0) (в системе rgb)
  • #ff0000 (в шестнадцатиричной системе)
  • transparent (прозрачная)

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Краткая запись:

border:border-width border-style border-color; border: 1px solid #000;

Внешние границы (outline)

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

outline-color (цвет)

Значения:

  • red (цвет)
  • rgb(255,0,0) (в системе rgb)
  • #ff0000 (в шестнадцатеричной системе)
  • invert (инвертированный, противоположный)

outline-width (ширина)

Значения:

  • thin (тонкая)
  • medium (средняя)
  • thick (толстая)
  • значение

outline-style (стиль границы)

Значения:

  • none (без границы)
  • dotted (из точек)
  • dashed (пунктирная)
  • solid (сплошная)
  • double (двойная)
  • groove (трехмерная)
  • ridge (трехмерная)
  • inset (трехмерная с тенью)
  • outset (трехмерная с тенью)

Краткая запись:

outline:outline-color outline-style outline-width; outline: #0f0 solid thick;

Некоторые приемы с границей

Рамка вокруг изображения

Пример:

Результат:

Двойная рамка с использованием CSS

Пример:

Результат:

Путь осилит идущий,

И поэтому я иду.
Через горы и пущи,
Через радость мою и беду.

Эффектные рамки для изображений

Отступы и рамки в CSS с помощью параметров margin, padding и border

Здравствуйте, уважаемые читатели блога webcodius.ru! Сегодня мы продолжим изучение каскадных таблиц стилей или CSS. В прошлых статьях мы уже рассмотрели в общих чертах блочную верстку сайта. В результате у нас стали получаться вполне профессиональные web-страницы, но чего-то им не хватает. А не хватает им скорей всего отступов и рамок. Сегодня мы и займемся рассмотрением стилевых правил margin, padding и border, которые позволяют задавать отступы и рамки для html-элементов.

Параметры отступов в CSS

С помощью каскадных таблиц стилей существует возможность задавать отступы двух видов.

1. Внутренний отступ — это расстояние от воображаемой границы элемента до его содержимого. Величина расстояния задается с помощью параметра padding. Такой отступ принадлежит самому элементу и находится внутри него.

2. Внешний отступ — расстояние между границей текущего элемента веб-страницы и границами соседних элементов, либо родительского элемента. Размер расстояния регулируется свойством margin. Такой отступ находится вне элемента.

Для наглядности картинка:

Например, рассмотрим ячейку html таблицы заполненную текстом. Тогда внутренний отступ это расстояние между воображаемой границей ячейки и содержащимся в ней текстом. А внешний отступ это расстояние между границами соседних ячеек. Начнем с внутренних отступов.

Внутренние отступы в CSS с помощью padding (top, bottom, left, right)

Свойства стиля padding-left, padding-top, padding-right и padding-bottom позволяют задать величины внутренних отступов, соответственно, слева, сверху, справа и снизу элемента web-страницы:

padding-top | padding-right | padding-bottom | padding-left: значение | проценты | inherit

Величину отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. При указании процентов, значение считается от ширины элемента. Значение inherit указывает, что оно наследуется от родителя.

Например, для текущего абзаца я применил правило стиля, задающий левый отступ 20 пикселей, верхний отступ 5 пикселей, справа отступ 35 пикселей и снизу 10 пикселей. Запись правила в файле каскадных таблиц стилей будет выглядеть следующим образом:

p.test <
padding-left:20px;
padding-top:5px;
padding-right:35px;
padding-bottom:10px
>

Сборное правило padding позволяет указать отступы сразу со всех сторон элемента веб-страницы:

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

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

Таким образом правило CSS приведенное выше можно максимально сократить и записать следующим образом:

Свойство margin или внешние отступы в CSS

Атрибуты стиля margin-left, margin-top, margin-right и margin-bottom позволяют задать величины внешних отступов, соответственно, слева, сверху, справа и снизу:

margin-top | margin-right | margin-bottom | margin-left: |auto|inherit

Как уже упоминалось выше внешним отступом является расстояние от границы текущего элемента до границы соседнего элемента, либо, если соседних элементов нет, до внутренней границы родительского контейнера.

Величину отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах:

Значение auto означает, что размер отступов будет автоматически рассчитан браузером. В случае использования процентной записи, то отступы рассчитываются в зависимости от ширины родительского контейнера. Причем это относится не только к margin-left и margin-right, но и для margin-top и margin-bottom отступы в процентах будут рассчитываться в зависимости от ширины, а не высоты контейнера.

В качестве значений внешних отступов допустимо применять отрицательные величины:

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

Внешние отступы мы также можем указать с помощью атрибута стиля margin. Он задает величины отступа одновременно со всех сторон элемента web-страницы:

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

Параметры рамки с помощью свойства border

При настройке рамок существует три типа параметров:

    border-w >Начнем с параметра толщины рамки:

border-width: [значение | thin | medium | thick] <1,4>| inherit

Толщину рамки можно задавать в пикселях, либо в других доступных в css единицах. Переменные thin, medium и thick задают толщину рамки в 2, 4 и 6 пикселей соответственно:

Как и для свойств padding и margin, для параметра border-width разрешается использовать одно, два, три или четыре значения, задавая таким образом толщину рамки для всех сторон сразу или для каждой по отдельности:

border-width: 5px 3px 5px 3px

Для текущего абзаца сделаем толщину верхней рамки 1px, правой 2px, нижней 3px, а левой 4px с помощью правила

С помощью атрибутов стиля border-left-width, border-top-width, border-right-width и border-bottom-width можно задавать толщину, соответственно, левой, верхней, правой и нижней сторон рамки:

border-left-width|border-top-width|border-right-width|border-bottom-width: thin|medium|thick| |inherit

Следующий параметр border-color с помощью которого можно управлять цветом рамки:

border-color: [цвет | transparent] <1,4>| inherit

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

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

С помощью атрибутов стиля border-left-color, border-top-color, border-right-color и border-bottom-color можно задать цвет, соответственно, левой, верхней, правой и нижней сторон рамки:

border-left-color|border-top-color|border-right-color|border-bottom-color: transparent| |inherit

И последний параметр border-style задает тип рамки:

border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] <1,4>| inherit

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

CSS Outline

Структура CSS

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

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 используется для задания цвета контура.

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

  • name — Укажите имя цвета, например «red»
  • RGB — Укажите значение RGB, например «rgb(255,0,0)»
  • Hex — Укажите шестнадцатеричное значение, например «#ff0000»
  • invert — выполняет инверсию цвета (что обеспечивает видимость структуры, независимо от цвета фона)

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

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

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

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

Пример

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пкс за пределами края границы.

Все о свойстве border

Основы

Всем знакомо такое использование:

Это однопиксельная сплошная рамка. Немного меняем синтаксис:

Например у параметра border-width есть три параметра: thin, medium, thick:

Если необходимо менять цвет границы при наведении на объект:

Но так это реализовать проще и правильнее:

Border-Radius

border-radius — это новый параметр CSS3 для отображения закругленных углов, который корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).

Для каждого угла можно назначить свое закругление:

В приведенном примере необязательно назначать «0» border-top-right-radius и border-bottom-left-radius, если они не наследуют значения, которые должны быть изменены.
Всю конструкцию можно сжать в одну строку:

А вот как можно нарисовать лимон средствами CSS:

Здесь описаны самые простые и популярные примеры применения параметра border. Перейдем к более сложным.

Несколько границ

Border-Style

solid, dashed, and dotted — самые популярные значения параметра border-style, но давайте рассмотрим другие, например, groove and ridge.

Или более подробно:

Outline

Самый популярный способ создания двойной границы — это параметр outline:

Этот способ отлично работает, но ограничен созданием двойной рамки. Если вам необходимо отобразить несколько границ элемента, то необходимо использовать другую технику.

Псевдоэлементы

Можно использовать такую конструкцию:

Возможно это не самое элегантное решение, однако оно работает

Box-Shadow

Еще один способ, с применением теней:

Изменение углов

К параметру border-radius можно применять два значения, используя «/», например:

Это то же самое, что:

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

CSS фигуры

В следующих примерах предполагается такая разметка:

И такой базовый css:

Наиболее частым примером использования CSS фигур является отображение стрелок. Чтобы понять, как это работает, необходимо разобраться с использованием отдельного border-color для каждой стороны и установкой значения «0» для width и height:

Или то же самое:

А теперь оставляем только синий треугольник:

Создание Speech Bubble

Наша базовая разметка:

Теперь нужно расположить стрелку-треугольник в нужном месте. Вот наш цветной квадратик:

Оставляем только четверть квадратика:

Теперь перемещаем ниже и закрашиваем:

Вертикальное центрирование текста

минус использования line-height при вертикальном центрировании в ограничении текста одной строкой. Для решения этой проблемы, можно применить display: table к нашему Speech Bubble и display: table-cell к тексту:

Еще один пример нестандартного использования границ:

Свойство 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-offset

Свойство CSS outline-offset используется для указания расстояния между контуром (outline) и внешним краем рамки элемента (border) или границей элемента, если рамка отсутствует.

Свойство CSS outline-offset — расстояние между рамкой и контуром.

Тип свойства

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

Значения

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

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

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

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

Синтаксис

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

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

Css округление блока. Смещение внешней рамки outline-offset

В предыдущем уроке мы изучили, как задать границу для элемента. Также были рассмотрены такие свойства как border-color и border-style , с помощью которых можно настраивать цвет и стиль границы. Однако все рамки у нас получались с прямыми углами. Теперь мы расскажем, каким образом можно сделать закругленные углы в CSS для границ.

Как закруглить углы: свойство CSS3 border-radius

Закругление углов в CSS можно сделать для любого элемента HTML-страницы. Для этого необходимо применить к нему свойство border-radius с соответствующим значением. Чаще всего значение указывается в пикселях, но можно также использовать и другие единицы, например, em или проценты (в последнем случае вычисление производится относительно ширины блока).

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

Стиль, описанный выше, даст следующий результат на элементе

Вы также можете сделать закругленные края только для верхних или нижних углов элемента либо задать каждому углу разный радиус скругления — большое поле для фантазии! Пример:

Но и это еще не всё: вместо простых круглых углов можно задавать эллиптическое скругление. Для этого понадобится указать два значения, разделенные косой чертой (для горизонтальной и вертикальной полуосей эллипса). Приведем пример на блоке размером 150×450 пикселей:

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

  • border-top-left-radius — для верхнего левого угла;
  • border-top-right-radius — для верхнего правого угла;
  • border-bottom-left-radius — для нижнего левого угла;
  • border-bottom-right-radius — для нижнего правого угла.

Принцип скругления углов

На рисунке ниже показано, каким образом вычисляется скругление углов в CSS. Так, если для угла указано одно значение, — например, 20px , — это означает, что закругление будет происходить по окружности с радиусом 20 пикселей. В случае, когда задаются два значения через косую черту, например, 30px/20px , закругление углов будет происходить по эллипсу. Первое значение в таком случае является длиной горизонтальной полуоси эллипса — 30px , а второе — длиной вертикальной полуоси — 20px:

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

CTRL+N, или выбрать функцию «Создать» (Create) в выпадающем из меню «Файл» списка. Далее из того же списка выберите операцию «Импорт» или вызовите ее комбинацией клавиш CTRL+I. Далее, укажите в диалоговом окне путь к файлу изображения, и нажмите кнопку «Импорт» (Import). Ваше отобразится на данном .

На панели инструментов найдите свиток «Редактор узлов» (Node Editor), в нем выберите инструмент «Форма» (Shape). Также этот инструмент можно вызвать нажатием клавиши F10.

Справа от угла, который вам нужно закруглить, щелкните левой кнопкой мыши по границе изображения. Появится новый узел у изображения, дополнительно к четырем угловым. Далее, выберите опцию «Преобразовать в кривую» (Convert Line To Curve) на панели «Редактора узлов». Слева от вновь созданного узла появятся метки закругления.

На таком же расстоянии от угла добавьте новый узел на перпендикулярной стороне изображения. Не меняя инструмента «Форма», щелкните по основному угловому узлу дважды, он будет удален. Сразу станет заметным закругленный угол изображения. Метками направляющих прямых можно изменять радиус закругления угла.

Очень простым способом (с привлечением векторного объекта) можно все углы у прямоугольного изображения. Не прибегая к вышеописанному способу редактирования узлов, нарисуйте рядом с импортированным изображением прямоугольник такого же размера инструментом «Прямоугольник» (Rectangle Tool) или вызовите инструмент клавишей F6.

Уже знакомым вам инструментом «Форма» щелкните по прямоугольнику и потяните мышкой за любой из его узлов к прямоугольника. Углы будут закруглены. Радиус закругления можно откорректировать тем же инструментом.
Отметьте свое изображение стрелочкой инструмента «Указатель» (Pick Tool).
Далее в списке главного меню найдите свиток «Эффекты» (Effects) и выберите опцию «PowerClip»и из выпадающего списка функцию «Поместить в контейнер» (Place Inside Container). Широкой стрелкой укажите на нарисованный вами прямоугольник с закругленными углами. Он станет рамкой, в которой разместится ваше изображение.

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

Используя функцию «PowerClip», можно помещать изображения в разнообразные рамки самых причудливых форм.

  • Официальное руководство по работе с Corel Draw, М.Мэтьюз, К.Мэтьюз, 1997
  • Как сгладить острые углы?
  • — компьютер
  • — программа Adobe Photoshop
  • — фотография

Правой кнопкой мыши нажмите на слое Background, выберите пункт Duplicate Layer и нажмите ОК (либо сочетание Ctrl+J). Затем создайте новый слой (Ctrl+Shift+N), поместите его между задним фоном и его копией как это показано на скриншоте (можно залить его каким-нибудь цветом, например белым). Заблокированный слой отключите (нажмите на «глаз» слева) или удалите.

В палитре инструментов найдите кнопку с прямоугольником (Rectangle Tool) и зажмите ее на левой кнопкой мыши. Появится дополнительное меню, где нужно (Rounded Rectangle Tool). Настройки в верхней части выставите такие же, как на скриншоте, а поле Radius измените по вкусу (чем больше, тем более круглые будут углы, и тем больше изображения обрежется.

Затем на фотографии выделите фрагмент, который вы хотите использовать (например, в качестве аватарки). Если вы ошиблись, нажмите клавишу Esc и повторите выделение. После того, как нужный фрагмент будет выделен, нажмите в него правой кнопкой мыши и выберите пункт Make Selection… и нажмите ОК.

Готово, вы получили слой с фотографией с закругленными углами. Теперь слой Layer 2 (тот, что служит задним фоном) можно залить любым цветом, либо оставить прозрачным.

Прозрачные png-файлы — отличный формат, однако далеко не все онлайн-сервисы (социальные сети, блоги и т.п.) поддерживают прозрачные png-файлы. Если эффекта скругленных углов не получается, есть другой выход.

Выберите для заднего фона (Layer 2) цвет, наиболее близкий к тому, что установлен на странице, куда вы размещаете фотографию. Затем сохраните файл в формате jpg.

Все современные браузеры поддерживают стандарты гипертекстовой разметки HTML5 и стили оформления CCS3. И если ваш сайт (шаблон) поддерживает современные стандарты, то вы можете вносить изменения в оформление, такое как скругление углов, тени, градиентная заливка, не прибегая к помощи графических редакторов.

Вебмастера повсеместно используют скругленные углы у блоков и рамок на сайтах. Я в этой статье расскажу как же закруглить углы у картинок и фотографий на сайте без использования сторонних программ, только с помощью CSS.

Чтобы приведенные примеры в статье корректно отображались у вас на экране, вы должны использовать самые свежие версии браузеров, FireFox, Chrome и те что сделаны на основе их: Яндекс.Браузер, Амиго и так далее.

Закругление углов у блоков DIV

По стандарту CSS3 чтобы блок DIV имел скругленные углы, ему необходимо придать стиль border-radius , например так:

Для наглядности нарисуем два блока с прямыми и скругленными углами:

Блок с прямыми углами

Блок с закругленными углами

Закругление углов у картинок

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

Вот изображение без CSS обработки

А теперь с загругленными углами:

Чтобы стало совсем «красиво» с начала добавим окантовку…

Border-radius: 10px; border: 5px #ccc solid;

Border-radius: 10px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;

Вариант ниже (закругленные углы с тенью без бордюра) очень похож на коврик для мыши:

Border-radius: 10px; box-shadow: 0 0 10px #444;

И напоследок полное издевательство над изображением

Border-radius: 50%; border: 5px #cfc solid; box-shadow: 0 0 10px #444;

Если вы откроете изображении в новом окне, то увидите, что оно (изображение) в неизменном виде, а все углы, тени и так далее — всего лишь результат обработки CSS стилей вашим браузером.

Маленькое лирическое отступление

Стиль border увеличивает размер изображения на величину окантовки. Если указано значение border: 5px , то итоговое изображение станет шире и выше на 10 пикселей. Учитывайте это, в некоторых случаях может «поехать» верстка сайта.

А стиль box-shadow не влияет на размер картинки, тень как бы наезжает на соседние элементы. При его использовании верстка сайта не страдает.

Как закруглить углы картинок на WordPress

Во всех приведенных примерах выше я прописывал стили прямо в тегах html кода. Например последний выглядит так:

Это хорошо когда нужно переоформить одну картинку или фотографию. А если вы захотите изменить все? Ну не будете же вы лазить по всему своему сайту, чтобы подредактировать отображение каждой. В большинстве случаев WordPress тегу IMG определяет несколько классов стилей. Один по уникальному имени файла с изображением, другой по размеру, и еще по выравниваю. Вы можете дополнить один из них вышеуказанными параметрами.

Например для всех изображений, для который не указано выравнивание, в файле style.css вашей темы WordPress пропишите следующее:

Либо самый жесткий метод для всех картиной на сайте. Переопределим стиль для всех тегов IMG :

Последний вариант подойдет не только для WordPress, а для любой CMS. И даже для простой HTML странички в том случае когда при выводе изображений тегу IMG не присваеватся никаких классов стилей. Но будьте внимательны. Если вы переопределите параметры отображения тега IMG вы измените внешний вид ВСЕХ картинок на сайте!

Вместо заключения

Все примеры в статье условные и призваны лишь продемонстрировать некоторые возможности CSS по обработки изображений и показать как это просто.

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

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

Открываем в Фотошопе фотографию, которую собираемся редактировать.

Затем создаем копию слоя с водопадом под названием «Фон» . Для экономии времени воспользуемся горячими клавишами CTRL+J .

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

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

Я задам значение в 30 пикселей, так будет лучше видно результат.

Теперь нужно растянуть полученную фигуру на весь холст. Вызываем функцию «Свободное трансформирование» горячими клавишами CTRL+T . На фигуре появится рамка, при помощи которой можно перемещать, вращать и изменять размер объекта.

Нас интересует масштабирование. Растягиваем фигуру при помощи маркеров, указанных на скриншоте. После завершения масштабирования нажимаем ENTER .

Совет: для того, чтобы совершить масштабирование максимально точно, то есть, не выйдя за пределы холста, необходимо включить так называемую «Привязку» Посмотрите скрин, там указано, где данная функция находится.

Функция заставляет объекты автоматически «Прилипать» к вспомогательным элементам и границам холста.

Как видим, вокруг фигуры образовалось выделение. Теперь переходим на слой-копию, а со слоя с фигурой снимаем видимость (см. скриншот).

Теперь слой с водопадом активен и готов к редактированию. Редактирование заключается в удалении лишнего из углов картинки.

Инвертируем выделение горячими клавишами CTRL+SHIFT+I . Теперь выделение осталось только на углах.

Обратите внимание, что стили CSS для данной фигуры заносятся в файл один раз, а HTML-тег можно располагать на сайте неограниченное количество раз.

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

Как сделать закругленные углы в CSS

Для закругления углов используется атрибут border-radius .

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

HTML-тег div выдаст нам прямоугольник в рамке с закругленным и углами :

а HTML-тег для выдачи текста будет выглядеть так:

Получаем прямоугольник с закругленными углами и текстом:

Если из кода убрать атрибуты описания размеров прямоугольника width и height , то можно получить такие формы с закругленными углами:

В этом случае формы принимают размеры среды: длина соответствует ширине поля, а высота изменяется по мере наполнения формы содержимым.

Закругление выбранных углов

В описании стилей параметр 10px в атрибуте border-radius показывает радиус закругления, который можно изменять, подбирая нужный. Если задать 0, то закругление не произойдет. Этим свойством можно воспользоваться, когда необходимо сделать закругление выбранных углов.

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

1. Левый верхний угол.

2. Правый верхний угол.

3. Правый нижний угол.

4. Левый нижний угол.

Таким получается прямоугольник с выбранными закруглениями только в верхних углах.

Отсчет углов ведется по часовой стрелке, начиная с левого верхнего угла:

2. Закругление углов с помощью HTML кода без записи в файл стилей

Рассмотрим второй способ получения прямоугольника с закругленными углами с помощью HTML кода без записи в файл стилей.

HTML закругленные углы

Есть одна небольшая фишка, которая ещё больше упрощает весь процесс – это HTML закругленные углы . Она заключается в формировании HTML кода, в котором прописываются те же стили, что и в кодах CSS. При этом используются те же атрибуты, что и в блоке CSS и отпадает необходимость записи блока в файл Style.css. Одним словом – заменяем полностью кодом HTML код CSS.

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

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

3. Картинки с закругленными углами. Рамка вокруг картинки HTML

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

Это делается очень просто, и сейчас мы этому научимся.

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

Закругляем углы картинки с добавлением рамки

Закругление углов картинок в CSS и HTML и добавление рамки можно выполнить одним из двух способов, описанных выше.

Используя первый способ данной статьи, коды картинок для файла стилей и тега div HTML-кода будут выглядеть следующим образом:

Обратите внимание, что часть атрибутов можно заносить в файл стилей, а часть в тег div. В нашем случае размеры картинки width и height вставлены в HTML-код.

Код HTML второго способа без использования файла стилей, описанного в данной статье, имеет такой вид:

В результате работы кодов каждого из двух способов получаем один и тот же результат – картинку с закругленными углами:

Отступы и рамки CSS. Рамки и границы

Рассмотрим некоторый документ. На нем сформированы (отображены на экране в браузере) html-элементы. Они формируются на основании тегов. Вы расставляете теги, их обрабатывает парсер html (есть в любом браузере) и строит html-элементы. И как будут выглядеть эти элементы, определяет CSS.

У всех html-элементов есть 4 области: область внешних отступов, рамка, внутренние отступы и содержание элемента. Для чего они нужны?

  • Внешние отступы (margin) — нужны, чтобы регулировать взаимодействие этого элемента с границами других элементов.
  • Внутренние отступы (padding) — это расстояние от рамки до содержания данного элемента.
  • Содержание самого элемента. Тут и так понятно. Если есть вложенные элементы, то они в этой области и находятся.
  • Рамка (border). Очерчивает границы элемента. Схематично 4 области можно представить так:

Следует понимать, что каждый элемент лежит внутри какой-то области. Эта область для элемента, который лежит внутри нее, называется контейнером. Т.е. контейнер — это область контента родительского элемента. Эта область и определяет пространство для построения внутреннего элемента. Значит внутренний элемент будет подстраиваться под размер этой области.

Внешние отступы

Это когда наш элемент взаимодействует с границами контейнера и с границами соседних элементов (те, которые в коде расположены рядом с ним). Основные правила:

  • margin-top: auto|величина|% — отступ сверху.
  • margin-right: auto|величина|% — отступ справа.
  • margin-bottom: auto|величина|% — отступ снизу.
  • margin-left: auto|величина|% — отступ слева.
  • margin: margin-top margin-right margin-bottom margin-left – сборное правило.

Значение “auto” — значит самостоятельный разбор браузером этих величин. Размер отступа можно указать в величинах: em, ex, px. Проценты (%) считаются от ширины контейнера (от области контента родительского элемента). Если указать отрицательное значение, то границы элементов внутри родительского контейнера наедут друг на друга.

Правило “margin” — сборное, здесь указываются значения всех 4-х отступов (начиная сверху и по часовой стрелке). Примеры:

Margin: 10px 20px 20px 30px; margin: 10px 20px 30px; — отступ слева справа одинаков margin: 10px 20px; — отступ сверху- снизу и слева- справа одинаков margin: 10px; — все отступы одинаковы

Внутренние отступы

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

  • padding-top: величина|%.
  • padding-right: величина|%.
  • padding-bottom: величина|%.
  • padding-left: величина|%.
  • padding: padding-top padding-right padding-bottom padding-left — сборное правило. По аналогии с “margin”.

Рамки в CSS

У всех рамок есть следующие характеристики:

  • Толщина — border-width: величина (thin|medium|thick). По умолчанию — medium.
  • Цвет — border-color: цвет. По умолчанию — цвет шрифта в этом элементе.
  • Тип — border-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset. Типы: нет рамки | точками | пунктиром | сплошная | двойная | имитация рельефа.

Сами правила рамки:

  • border-top- (width|color|style).
  • border-right- (width|color|style).
  • border-bottom- (width|color|style).
  • border-left- (width|color|style).
  • border: border-width border-style border-color. Сборное правило.

В этой главе:

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

  • Margin (внешний отступ) — пустое пространство (поле), которое отделяет один элемент от другого. Самый простой пример внешнего отступа — промежуток между абзацами, идущими друг за другом. Область внешнего отступа прозрачна и не может иметь свой цвет и других эффектов оформления.
  • Border (рамка элемента) — граница с любой стороны элемента. Рамка может быть установлена как со всех сторон элемента, так и с одной стороны. Используя рамку можно просто красиво оформить элемент или визуально отделить содержимое текущего элемента от других элементов страницы.
  • Padding (внутренний отступ) — пустое пространство между содержимым элемента и его рамкой. Область внутреннего отступа прозрачна и не может иметь свой цвет или другие эффекты оформления.
  • У большинства элементов есть область содержимого, в которой располагается все содержимое элемента (текст, вставляемые изображения или другие элементы).

Рамка

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

Каждая рамка имеет три свойства, которыми мы можем управлять с помощью CSS: ширина, стиль и цвет, рассмотрим с помощью каких свойств можно их задавать и изменять:

Вместо указания всех трех свойств, можно указать всего одно — свойство border , которое позволяет одновременно указать ширину, стиль и цвет для рамки:

Отступы и рамки CSS. Рамки и границы

Рамки — это такие линии, которые окружают элемент (содержащийся в нём контент и отступы вокруг него). Пример, с которым мы уже сталкивались — рамки ячеек внутри таблицы.

CSS предусматривает два типа рамок: внутренние границы и внешние линии. Свойства CSS, отвечающие за оформление рамок, начинаются со слова «border», которое как раз и можно перевести как «Рамка», «Граница». Наличие и формат внешнего контура задаются свойствами, начинающимися словом «outline». Outline, в отличие от border, не влияет на ширину и положение обрамляемого блока. Кроме того, его нельзя установить только с одной стороны, как border — только со всех сторон сразу.

Сначала поговорим об оформлении border, потом перейдём к outline .

border-width

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

Задавать ширину можно как с помощью привычных пикселей, процентов и других единиц длины CSS, так и зарезервированными словами thin (2px), medium (4px) и thick (6px).

Border-width: 16px 12px 4px 8px;

border-style

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

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

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

border-style: solid double dotted none

border-color

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

border

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

Для настройки разных правил рамкам с разных сторон можно использовать следующие значения:

  • border-top — верхняя граница.
  • border-right — правая.
  • border-bottom — нижняя.
  • border-left — левая.

outline-width

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

outline-style

Значения свойства дублируют значения border-style . Правило задаёт стиль внешнего контура.

CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы padding . Рамка задаётся с помощью краткого свойства border . Стиль рамки задается с помощью трех свойств: стиль , цвет и ширина .

Оформление рамок и границ HTML-элементов с помощью CSS-свойств

1. Стиль рамки border-style

По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.

dotted
dashed
solid
double
groove
ridge
inset
outset
Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style:
border-style
(border-top-style, border-right-style, border-bottom-style, border-left-style)
Значения:
none Значение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства.
hidden Эквивалентно none .
dotted
initial
inherit

2. Цвет рамки border-color

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

border-color
(border-top-color, border-right-color, border-bottom-color, border-left-color)
Значения:
transparent Устанавливает прозрачный цвет для рамки. При этом ширина рамки остается. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента.
цвет Цвет рамок задается при помощи значений свойства .
Одновременное перечисление четырех разных цветов для рамок элемента, только для свойства border-color:
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

3. Ширина рамки border-width

Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none , и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.

4. Задание рамки одним свойством

Свойство border позволяет объединить в себе следующие свойства: border-width , border-style , border-color , например:

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

5. Задание рамки для одной границы элемента

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

Стиль верхней границы задается с помощью свойства border-top , нижней — border-bottom , левой — border-left , правой — border-right .

6. Внешний контур outline

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

Также, внешний контур, в отличие от рамки элемента, окружает элемент со всех сторон, обрамляя его целиком.

Внешний контур всегда имеет прямоугольную форму, он не повторяет границы блока, для которого задан border-radius .

Свойство outline позволяет объединить в себе следующие свойства: outline-color , outline-style , outline-width . Если какое-то из значений не указано, его место займет значение по умолчанию.

6.1. Стиль внешнего контура outline-style

Вид линии внешнего контура задаётся аналогично со стилем рамки элемента. Не наследуется.

6.2. Цвет внешнего контура outline-color

Цвет внешнего контура можно прописывать только при установленном значении outline-style . Не наследуется.

6.3. Толщина внешнего контура outline-width

Толщина линии внешнего контура задается аналогично с толщиной рамки элемента. Не наследуется.

С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого — создание тени. Далее рассмотрим эти методы и их различия между собой.

Свойство outline

Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:

  • outline выводится вокруг элемента (border внутри);
  • outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
  • outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
  • на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

Возникает вопрос — в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:

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

Разноцветные рамки

Надо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1.

Илон Маск рекомендует:  Все про HyperText Transfer Protocol
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL