CSS Outline Color (Цвет контура)
Свойство outline-color задаёт цвет контура.
Цвет можно указать как:
- название — например,
red. - значение HEX — например,
#ff0000. - значение RGB — например,
rgb(255,0,0). - значение HSL — например,
hsl(0, 100%, 50%). invert— инвертирует цвет, что делает контур видимым на любом фоне.
Примеры CSS Outline Color
Вот несколько контуров с разными цветами. Элементы также имеют тонкую чёрную границу внутри контура.
Пример
Четыре абзаца с красным, синим, зелёным контурами и контуром invert.
Prompt
HTML-страница, демонстрирующая различные цвета контура с помощью названий цветов и invert.
Во внутреннем блоке
<style> задайте абзацам сплошную чёрную границу 1px и отступ 5px. Затем создайте четыре класса: сплошной красный, точечный синий, outset зелёный и сплошной invert контуры. Добавьте подписанный абзац для каждого.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
border: 1px solid black;
padding: 5px;
}
p.ex1 {
outline-style: solid;
outline-color: red;
}
p.ex2 {
outline-style: dotted;
outline-color: blue;
}
p.ex3 {
outline-style: outset;
outline-color: green;
}
p.ex4 {
outline-style: solid;
outline-color: invert;
}
</style>
</head>
<body>
<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">An outset green outline.</p>
<p class="ex4">A solid invert outline.</p>
</body>
</html>
Значения HEX
Цвет контура также можно задать шестнадцатеричным (HEX) значением.
Пример
Цвет контура задан значением HEX #ff0000.
Prompt
HTML-страница, задающая цвет контура значением HEX.
Во внутреннем блоке
<style> задайте абзацу сплошной контур с outline-color #ff0000 (красный), а также границу и отступ. Добавьте абзац, использующий его.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.ex1 {
border: 1px solid black;
padding: 5px;
outline-style: solid;
outline-color: #ff0000; /* red */
}
</style>
</head>
<body>
<p class="ex1">Outline color set with a HEX value.</p>
</body>
</html>
Значения RGB
Цвет контура также можно задать значением RGB.
Пример
Цвет контура задан значением rgb(255, 0, 0).
Prompt
HTML-страница, задающая цвет контура значением RGB.
Во внутреннем блоке
<style> задайте абзацу сплошной контур с outline-color rgb(255, 0, 0) (красный), а также границу и отступ. Добавьте абзац, использующий его.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.ex1 {
border: 1px solid black;
padding: 5px;
outline-style: solid;
outline-color: rgb(255, 0, 0); /* red */
}
</style>
</head>
<body>
<p class="ex1">Outline color set with an RGB value.</p>
</body>
</html>
Значения HSL
Вы также можете задать цвет контура значением HSL.
Подробнее о HEX, RGB и HSL вы можете узнать в главах о цветах CSS.
Пример
Цвет контура задан значением hsl(0, 100%, 50%).
Prompt
HTML-страница, задающая цвет контура значением HSL.
Во внутреннем блоке
<style> задайте абзацу сплошной контур с outline-color hsl(0, 100%, 50%) (красный), а также границу и отступ. Добавьте абзац, использующий его.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.ex1 {
border: 1px solid black;
padding: 5px;
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* red */
}
</style>
</head>
<body>
<p class="ex1">Outline color set with an HSL value.</p>
</body>
</html>