Outline CSS: как создавать четкие и красивые интерфейсы
Outline в CSS является стилизацией границы элемента, которая отображается вокруг элемента, но не влияет на его размер. Она позволяет добавить контур вокруг элемента, который может быть изображен в виде линии, точек, двойных линий или пунктира.
Синтаксис свойства outline:
outline: [ширина] [стиль] [цвет];
Примеры:
outline: 2px solid red; // линия шириной 2 пикселя и цветом красный
outline: dotted 3px green; // пунктирная линия черного цвета, толщиной 3 пикселя
outline: double blue; // двойная линия синего цвета
Outline также может иметь свойства: outline-offset и outline-radius.
Outline-offset устанавливает расстояние между краем контура и краем элемента.
Пример:
outline-offset: 10px;
Outline-radius устанавливает радиус скругления углов контура.
Пример:
outline-radius: 15px;
Пример кода:
button {
background-color: #4CAF50; /* Зеленый цвет */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
outline: 2px dotted red;
}
В приведенном выше примере кнопка имеет красный пунктирный контур толщиной 2 пикселя, который отображается вокруг кнопки.