CSS Outline Color (Culoarea conturului)
Proprietatea outline-color stabilește culoarea conturului.
Culoarea poate fi specificată ca:
- un nume — precum
red. - o valoare HEX — precum
#ff0000. - o valoare RGB — precum
rgb(255,0,0). - o valoare HSL — precum
hsl(0, 100%, 50%). invert— inversează culoarea, ceea ce menține conturul vizibil pe orice fundal.
Exemple CSS Outline Color
Iată câteva contururi cu culori diferite. Elementele au și un chenar negru subțire în interiorul conturului.
Exemplu
Patru paragrafe cu contururi roșu, albastru, verde și invert.
Prompt
O pagină HTML care demonstrează diferite culori de contur folosind nume de culori și invert.
Într-un bloc
<style> intern, dă paragrafelor un chenar solid negru de 1px și un padding de 5px. Apoi creează patru clase: contururi solid roșu, punctat albastru, outset verde și solid invert. Adaugă un paragraf etichetat pentru fiecare.
Rezultat: pagină HTML completă
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>
Valori HEX
Culoarea conturului poate fi stabilită și cu o valoare hexazecimală (HEX).
Exemplu
Culoarea conturului este stabilită cu valoarea HEX #ff0000.
Prompt
O pagină HTML care stabilește o culoare de contur cu o valoare HEX.
Într-un bloc
<style> intern, dă unui paragraf un contur solid cu outline-color #ff0000 (roșu), plus un chenar și padding. Adaugă un paragraf care îl folosește.
Rezultat: pagină HTML completă
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>
Valori RGB
Culoarea conturului poate fi stabilită și cu o valoare RGB.
Exemplu
Culoarea conturului este stabilită cu rgb(255, 0, 0).
Prompt
O pagină HTML care stabilește o culoare de contur cu o valoare RGB.
Într-un bloc
<style> intern, dă unui paragraf un contur solid cu outline-color rgb(255, 0, 0) (roșu), plus un chenar și padding. Adaugă un paragraf care îl folosește.
Rezultat: pagină HTML completă
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>
Valori HSL
Poți stabili culoarea conturului și cu o valoare HSL.
Poți afla mai multe despre HEX, RGB și HSL în capitolele despre culorile CSS.
Exemplu
Culoarea conturului este stabilită cu hsl(0, 100%, 50%).
Prompt
O pagină HTML care stabilește o culoare de contur cu o valoare HSL.
Într-un bloc
<style> intern, dă unui paragraf un contur solid cu outline-color hsl(0, 100%, 50%) (roșu), plus un chenar și padding. Adaugă un paragraf care îl folosește.
Rezultat: pagină HTML completă
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>