CSS Outline - Proprietate prescurtată
Proprietatea outline este o formă prescurtată pentru aceste proprietăți individuale: outline-width, outline-style (obligatorie) și outline-color.
Poți specifica una, două sau trei dintre aceste valori, iar ordinea nu contează.
Exemple CSS Outline Shorthand
Iată câteva contururi scrise cu forma prescurtată a proprietății outline.
Exemplu
Patru paragrafe folosesc valori diferite ale conturului prescurtat.
Prompt
O pagină HTML care demonstrează proprietatea prescurtată outline.
Într-un bloc
<style> intern, dă paragrafelor padding, apoi patru clase folosind forma prescurtată: "dashed", "dotted red", "7px solid yellow" și "thick ridge pink". 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 {
padding: 5px;
}
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 7px solid yellow;}
p.ex4 {outline: thick ridge pink;}
</style>
</head>
<body>
<p class="ex1">A dashed outline.</p>
<p class="ex2">A dotted red outline.</p>
<p class="ex3">A 7px solid yellow outline.</p>
<p class="ex4">A thick ridge pink outline.</p>
</body>
</html>
CSS Outline cu colțuri rotunjite
Contururile pot avea și colțuri rotunjite. Proprietatea border-radius este folosită pentru a rotunji colțurile.
Exemplu
Fiecare paragraf combină un contur prescurtat cu o proprietate border-radius pentru colțuri rotunjite.
Prompt
O pagină HTML care arată contururi cu colțuri rotunjite folosind border-radius.
Într-un bloc
<style> intern, dă paragrafelor padding, apoi cinci clase, fiecare combinând o formă prescurtată de contur cu un border-radius: dashed/8px, dotted red/5px, 7px solid yellow/5px, thick ridge pink/8px și thick solid green/10px. 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 {
padding: 5px;
}
p.ex1 {
outline: dashed;
border-radius: 8px;
}
p.ex2 {
outline: dotted red;
border-radius: 5px;
}
p.ex3 {
outline: 7px solid yellow;
border-radius: 5px;
}
p.ex4 {
outline: thick ridge pink;
border-radius: 8px;
}
p.ex5 {
outline: thick solid green;
border-radius: 10px;
}
</style>
</head>
<body>
<p class="ex1">A dashed outline with rounded corners.</p>
<p class="ex2">A dotted red outline with rounded corners.</p>
<p class="ex3">A 7px solid yellow outline with rounded corners.</p>
<p class="ex4">A thick ridge pink outline with rounded corners.</p>
<p class="ex5">A thick solid green outline with rounded corners.</p>
</body>
</html>