CSS Outline Offset (Decalajul conturului)
Între marginea sau chenarul unui element și conturul său, outline-offset introduce un spațiu transparent.
Contur la 15px în afara chenarului
Aici 15px separă conturul de marginea chenarului, în exterior.
Prompt
O pagină HTML care folosește outline-offset pentru a distanța conturul de chenar.
Într-un bloc
<style> intern, dă unui paragraf margin 30px, padding 5px, un chenar solid negru de 1px, un contur solid roșu de 3px și outline-offset 15px. Adaugă un paragraf.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 30px;
padding: 5px;
border: 1px solid black;
outline: 3px solid red;
outline-offset: 15px;
}
</style>
</head>
<body>
<p>This paragraph has a black border and a red outline 15px outside the border edge.</p>
</body>
</html>
Spațiu transparent
Pentru că spațiul este transparent, fundalul galben se oprește înainte de el, lăsând un gol vizibil între chenar și contur.
Prompt
O pagină HTML care arată că spațiul dintre chenarul unui element și conturul său este transparent.
Într-un bloc
<style> intern, dă unui paragraf margin 30px, padding 5px, un fundal galben, un chenar solid negru de 1px, un contur solid roșu de 3px și outline-offset 15px. Fundalul galben nu umple spațiul offset-ului, arătând că este transparent. Adaugă un paragraf.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 30px;
padding: 5px;
background: yellow;
border: 1px solid black;
outline: 3px solid red;
outline-offset: 15px;
}
</style>
</head>
<body>
<p>This paragraph has an outline 15px outside the border edge. The gap is transparent.</p>
</body>
</html>
CSS Outline Offset cu valoare negativă
Dă-i lui outline-offset o valoare negativă și conturul se mută pe partea interioară a marginii chenarului.
Exemplu
Cu -5px, conturul roșu stă la 5px spre interior față de marginea chenarului.
Prompt
O pagină HTML care folosește un outline-offset negativ, astfel încât conturul se află în interiorul marginii chenarului.
Într-un bloc
<style> intern, dă unui paragraf margin 30px, padding 5px, un fundal galben, un chenar solid negru de 1px, un contur solid roșu de 3px și outline-offset -5px. Adaugă un paragraf.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 30px;
padding: 5px;
background: yellow;
border: 1px solid black;
outline: 3px solid red;
outline-offset: -5px;
}
</style>
</head>
<body>
<p>This paragraph has a black border and a red outline -5px inside the border edge.</p>
</body>
</html>
Toate proprietățile CSS Outline
Proprietățile pentru contur, pe scurt:
outline— o singură declarație pentruoutline-width,outline-styleșioutline-color.outline-color— culoarea cu care este desenat conturul.outline-offset— distanța de la marginea sau chenarul unui element până la conturul său.outline-style— ce stil folosește conturul.outline-width— cât de lat este conturul.