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

авг

2016

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

Оцените материал

(0 голосов)

Здравствуйте! От создания тени у элементов в 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 данное определение контура можно сократить следующим образом: