Здравствуйте! От создания тени у элементов в CSS переходим к контурам элементов. Концепция контуров похожа на использование границ у элементов. Не стоит путать или заменять границы контурами, они имеют разное разное значение. Контуры полезны тем, что позволяют выделить элемент, чтобы привлечь к нему внимание в какой-то ситуации. Контуры располагаются вне элемента сразу за его границами.
Контур в CSS 3 представлен свойством outline, хотя данное свойство является сокращением следующих свойств:
<!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;
Об авторе