Контур линии обращается вокруг элементов, за пределами границ края, чтобы "выделить" элемент.
Свойства контура определяют стиль, цвет и ширину контура.
Примеры
Пример 1
Этот пример демонстрирует, как нарисовать линию вокруг элемента, за пределами края границы.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p { border:1px solid red; outline:green dotted thick; }
</style>
</head>
<body>
<p><b>Примечание:</b> Internet Explorer 8 (и выше) поддерживает свойство outline если указан !DOCTYPE.</p>
</body>
</html>
Пример 2
В этом примере показано, как задать стиль контура.<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p { border:1px solid red; }
p.dotted { outline-style:dotted; }
p.dashed { outline-style:dashed; }
p.solid { outline-style:solid; }
p.double { outline-style:double; }
p.groove { outline-style:groove; }
p.ridge { outline-style:ridge; }
p.inset { outline-style:inset; }
p.outset { outline-style:outset; }
</style>
</head>
<body>
<p class="dotted">Контур точками</p>
<p class="dashed">Пунктирный контур</p>
<p class="solid">Сплошной контур</p>
<p class="double">Двойной контур</p>
<p class="groove">Рифленый контур</p>
<p class="ridge">Ребристый контур</p>
<p class="inset">Вставленный контур</p>
<p class="outset">Выставленный контур</p>
<b>Примечание:</b> Internet Explorer 8 (и выше) поддерживает свойство outline если указан !DOCTYPE.
</body>
</html>
Пример 3
В этом примере показано, как задать цвет контура.<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p
{
border:1px solid red;
outline-style:dotted;
outline-color:#00ff00;
}
</style>
</head>
<body>
<p><b>Примечание:</b> Internet Explorer 8 (и выше) поддерживает свойство outline если указан !DOCTYPE.</p>
</body>
</html>
Пример 4
В этом примере показано, как задать ширину контура.<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p.one
{
border:1px solid red;
outline-style:solid;
outline-width:thin;
}
p.two
{
border:1px solid red;
outline-style:dotted;
outline-width:3px;
}
</style>
</head>
<body>
<p class="one">Это некоторый текст в параграфе.</p>
<p class="two">Это некоторый текст в параграфе.</p>
<p><b>Примечание:</b> Internet Explorer 8 (и выше) поддерживает свойство outline если указан !DOCTYPE.</p>
</body>
</html>
Все свойства контура CSS
Номер в колонке "CSS" указывает, в какой версии CSS свойство определено (CSS1 или CSS2).
| Свойство | Описание | Значения | CSS |
|---|---|---|---|
| outline | Устанавливает все свойства контура в одной декларации | outline-color outline-style outline-width inherit |
2 |
| outline-color | Устанавливает цвет контура | color_name hex_number rgb_number invert inherit |
2 |
| outline-style | Устанавливает стиль контура | none dotted dashed solid double groove ridge inset outset inherit |
2 |
| outline-width | Устанавливает ширину контура | thin medium thick length inherit |
2 |
Была ли эта информация полезной?
