Контуры очень похожи на границы, но есть и незначительные отличия,
- Контур не занимает места.
- Контуры не должны быть прямоугольными.
- Контур всегда одинаковый со всех сторон; вы не можете указывать разные значения для разных сторон элемента.
ПРИМЕЧАНИЕ. Свойства контура не поддерживаются IE 6 или Netscape 7.
С помощью CSS можно задать следующие свойства контура.
- Свойство outline-width используется для установки ширины контура.
- Свойство outline-style используется для установки стиля линии для контура.
- Свойство outline-color используется для установки цвета контура.
- Свойство outline используется для установки всех трех вышеуказанных свойств в одном выражении.
Свойство outline-width
Свойство outline-width указывает ширину контура, который нужно добавить в поле. Его значение должно быть длиной или одним из значений thin, medium,или thick, подобно атрибуту border-width. Ширина нулевых пикселей означает отсутствие контуров.
Вот пример -
< html>
< head>
< /head>
< body>
< p style="outline-width:thin; outline-style:solid;">
This text is having thin outline.
< /p>
< br />
< p style="outline-width:thick; outline-style:solid;">
This text is having thick outline.
< /p>
< br />
< p style="outline-width:5px; outline-style:solid;">
This text is having 5x outline.
< /p>
< /body>
< /html>
Это приведет к следующему результату -
Свойство outline-style
Свойство outline-style определяет стиль для строки (сплошной, пунктирной или пунктирной), которая обходит элемент. Он может принимать одно из следующих значений:
- none: нет границы. (Эквивалент ширины линии: 0;)
- solid: контур - сплошная сплошная линия.
- dotted: Контур - это серия точек.
- dashed: контур - это серия коротких строк.
- double: Outline - две сплошные линии.
- groove: схема выглядит так, как будто она вырезана на странице.
- ridge: контур выглядит противоположным.
- inset: Outline делает окно похожим на встроенный в страницу.
- outset: Outline заставляет окно выглядеть так, как будто он выходит из холста.
- hidden: То же, что и никто.
Вот пример -
< html>
< head>
< /head>
< body>
< p style="outline-width:thin; outline-style:solid;">
This text is having thin solid outline.
< /p>
< br />
< p style="outline-width:thick; outline-style:dashed;">
This text is having thick dashed outline.
< /p>
< br />
< p style="outline-width:5px;outline-style:dotted;">
This text is having 5x dotted outline.
< /p>
< /body>
< /html>
Это приведет к следующему результату -
Свойство outline-color
Свойство outline-color позволяет указать цвет контура. Его значение должно быть либо именем цвета, либо шестнадцатеричным цветом, либо значением RGB, как и с цветовыми и пограничными цветами.
Вот пример -
< html>
< head>
< /head>
< body>
< p style="outline-width:thin; outline-style:solid;outline-color:red">
This text is having thin solid red outline.
< /p>
< br />
< p style="outline-width:thick; outline-style:dashed;outline-color:#009900">
This text is having thick dashed green outline.
< /p>
< br />
< p style="outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
This text is having 5x dotted blue outline.
< /p>
< /body>
< /html>
Это приведет к следующему результату -
Свойства outline
Свойство outline является сокращенным свойством, которое позволяет указать значения для любого из трех свойств, рассмотренных ранее в любом порядке, но в одном выражении.
Вот пример -
< html>
< head>
< /head>
< body>
< p style="outline:thin solid red;">
This text is having thin solid red outline.
< /p>
< br />
< p style="outline:thick dashed #009900;">
This text is having thick dashed green outline.
< /p>
< br />
< p style="outline:5px dotted rgb(13,33,232);">
This text is having 5x dotted blue outline.
< /p>
< /body>
< /html>
Это приведет к следующему результату -
