Proprietà CSS outline-width
La proprietà CSS outline-width imposta lo spessore del contorno di un elemento. Valori e esempi pratici.
La proprietà outline-width definisce lo spessore di un outline — la linea tracciata appena fuori dal bordo di un elemento. Funziona in modo simile a border-width, ma con una differenza importante: un outline non occupa spazio nel box model, quindi modificare outline-width non sposta mai il layout degli elementi circostanti.
Poiché l'outline si trova fuori dal bordo e viene escluso dal box, la larghezza e l'altezza di un elemento non includono l'outline. Questo è esattamente il motivo per cui gli outline sono il modo predefinito del browser per mostrare il focus da tastiera — l'anello di focus può apparire e scomparire senza spostare la pagina.
Questa proprietà accetta i seguenti valori: medium, thin, thick, un valore <length>, initial, inherit, revert e unset.
Quando usare outline-width
- Indicatori di focus. Quando personalizzi l'anello di focus con le pseudo-classi
:focuso:focus-visible,outline-widthcontrolla quanto è evidente quell'anello. Mantenere un outline di focus visibile è importante per l'accessibilità — non impostarlo mai a0né rimuovere l'outline senza fornire un altro stile di focus visibile. - Evidenziazione senza reflow. Poiché l'outline si trova fuori dal box, un outline più spesso al passaggio del mouse o al focus non spinge i vicini come farebbe un bordo più spesso.
- Debug del layout. Un rapido
outline: 1px solid redè un modo popolare per visualizzare i box degli elementi senza influirne le dimensioni.
outline-width ha effetto solo quando outline-style è impostato a un valore diverso da none (il valore predefinito). Se lo stile è none, l'outline non ha larghezza indipendentemente da ciò che imposti qui. La proprietà abbreviata outline imposta larghezza, stile e outline-color in una sola dichiarazione.
Le tre parole chiave corrispondono a spessori definiti dal browser anziché a valori in pixel fissi, quindi possono variare leggermente tra i browser. In pratica thin è circa 1px, medium (il valore predefinito) è circa 3px e thick è circa 5px. Quando hai bisogno di un valore esatto e prevedibile, usa un valore <length> come 2px o 0.2em.
Nota che outline-width non accetta percentuali né valori negativi.
| Valore iniziale | medium |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditato | No. |
| Animabile | Sì. La larghezza dell'outline è animabile. |
| Versione | CSS2 |
| Sintassi DOM | Object.style.outlineWidth = "thick"; |
Sintassi
Sintassi CSS outline-width
outline-width: medium | thin | thick | length | initial | inherit | revert | unset;Esempio con valori multipli
Esempio di codice CSS outline-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.p1 {
outline-style: solid;
outline-width: 5px;
}
.p2 {
outline-style: solid;
outline-width: 0.4em;
}
.p3 {
outline-style: solid;
outline-width: thin;
}
.p4 {
outline-style: solid;
outline-width: medium;
}
.p5 {
outline-style: solid;
outline-width: thick;
}
.p6 {
outline-style: solid;
outline-width: 0.1cm;
}
.p7 {
outline-style: solid;
outline-width: 1mm;
}
</style>
</head>
<body>
<h2>Outline-width property example</h2>
<p class="p1">This is a paragraph with outline set to 5px.</p>
<p class="p2">This is a paragraph with outline set to 0.4em.</p>
<p class="p3">This is a paragraph with outline set to thin.</p>
<p class="p4">This is a paragraph with outline set to medium.</p>
<p class="p5">This is a paragraph with outline set to thick.</p>
<p class="p6">This is a paragraph with outline set to 0.1cm.</p>
<p class="p7">This is a paragraph with outline set to 1 mm.</p>
</body>
</html>Risultato
Nell'esempio seguente, il primo elemento non ha un bordo, il secondo sì. Nota che l'outline del secondo elemento è disegnato fuori dal suo bordo, con uno spazio che puoi allargare usando outline-offset.
Outline con un bordo
Altro esempio di codice CSS outline-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.ex1 {
outline-style: solid;
outline-width: thick;
}
div.ex2 {
border: 2px solid #1c87c9;
outline-style: solid;
outline-width: thick;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div class="ex1">Lorem Ipsum is simply dummy text of the printing...</div>
<br />
<div class="ex2">Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Esempio di outline di base
Esempio della proprietà CSS outline-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #1c87c9;
outline-style: dotted;
outline-width: 3px;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Combinare outline-width e outline-style
Esempio della proprietà CSS outline-width con la proprietà outline-style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #1c87c9;
outline-style: dashed;
outline-width: thick;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| medium | Definisce un outline medio. Questo è il valore predefinito di questa proprietà. | Provalo » |
| thin | Definisce un outline sottile. | Provalo » |
| thick | Definisce un outline spesso. | Provalo » |
| length | Definisce lo spessore dell'outline. | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dall'elemento padre. | |
| revert | Ripristina la proprietà al valore impostato dall'agente utente o dalla cascata precedente. | |
| unset | Reimposta la proprietà al suo valore ereditato o iniziale, a seconda dell'ereditarietà. |
Proprietà correlate
- outline — abbreviazione per larghezza, stile e colore in una sola dichiarazione.
- outline-style — richiesta affinché la larghezza sia visibile.
- outline-color — imposta il colore dell'outline.
- outline-offset — aggiunge spazio tra l'outline e il bordo dell'elemento.
- border-width — la controparte nel box model che influisce sul layout.