Как создать сайт

Контуры элементов

Здравствуйте! От  создания  тени у элементов в CSS переходим к  контурам элементов. Концепция контуров похожа на использование границ у элементов. Не стоит путать или заменять границы контурами, они имеют разное разное значение. Контуры полезны тем, что позволяют выделить элемент, чтобы привлечь к нему внимание в какой-то ситуации. Контуры располагаются вне элемента сразу за его границами.

Контуры элементов CSS

Контур в CSS 3 представлен свойством outline, хотя данное свойство является сокращением следующих свойств:

  • outline-color: цвет контура
  • outline-offset: смещение контура
  • outline-style: стиль контура. Оно принимает те же значения, что и border-style:
    • none: контур отсутствует
    • solid: контур в виде обычной линии
    • dashed: штриховая линия
    • dotted: линия в виде последовательности точек
    • double: контур в виде двух параллельных линий
  • outline-width: толщина контура
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Контур в CSS3</title>
        <style>
        div{
            width: 128px;
            height: 96px;
            margin: 20px;
            border: 1px solid #ccc;
            background-color: #eee;
            outline-color: red;
            outline-style: dashed;
            outline-width: 2px;
        }
        </style>
    </head>
    <body>
        <div>Контур в CSS3</div>
    </body>
</html>

Просмотреть  пример

С помощью свойства outline данное определение контура можно сократить следующим образом:

outline: red dashed 2px;

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться
Читайте также  Блочная модель
Понравилась запись? Подпишитесь на обновления по почте:

Об авторе

admin administrator

Оставить ответ

− 1 = 7

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: