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

Оцените материал
(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 данное определение контура можно сократить следующим образом:

outline: red dashed 2px;
Прочитано 657 раз
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+