Proprietà CSS Outline
Un profilo è una linea tracciata intorno ad un elemento - al di fuori del confine. Questo può essere utilizzato per fare un elemento "stand out" .
I CSS outline proprietà specificano lo stile, il colore, e la larghezza di un contorno.
Questo elemento ha un sottile bordo nero e un doppio schema che è 10px ampio e verde.
CSS Outline
Un outline è una linea che viene disegnata attorno agli elementi (al di fuori dei confini) per rendere l'elemento "stand out" .
Tuttavia, il outline struttura è diversa dalla proprietà border - Il outline non è una parte di dimensioni di un elemento; larghezza totale dell'elemento e altezza non è influenzata dalla larghezza del contorno.
Outline Style
Lo outline-style proprietà specifica lo stile del contorno.
Lo outline-style proprietà può avere uno dei seguenti valori:
-
dotted- Definisce un contorno tratteggiato -
dashed- Definisce un contorno tratteggiato -
solid- Definisce una linea continua -
double- Definisce un doppio contorno -
groove- Definisce un contorno scanalato 3D. L'effetto dipende dal valore outline-color -
ridge- Definisce un contorno increspato 3D. L'effetto dipende dal valore outline-color -
inset- Definisce un contorno 3D inserto. L'effetto dipende dal valore outline-color -
outset- Definisce un contorno fin 3D. L'effetto dipende dal valore outline-color -
none- Definisce senza contorno -
hidden- Definisce un contorno nascosta
L'esempio che segue prima imposta un sottile bordo nero attorno a ciascuna <p> elemento, allora mostra i diversi outline-style valori:
Esempio
p {
border: 1px solid black;
outline-color: red;
}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}Risultato:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Prova tu stesso "  | Nota: Nessuna delle altre proprietà CSS contorno descritte di seguito avrà alcun effetto a meno che il outline-style struttura si trova! |
|---|
Contorno Colore
L' outline-color proprietà viene utilizzata per impostare il colore del contorno.
Il colore può essere impostata tramite:
- Nome - specificare il nome di un colore, come "red"
- RGB - specificare un valore RGB, come "rgb(255,0,0)"
- Hex - specificare un valore esadecimale, come "#ff0000"
- invert - esegue una inversione del colore (che assicura che il contorno è visibile, indipendentemente colore di sfondo)
Esempio
p
{
border: 1px solid black;
outline-style: double;
outline-color: red;
}Risultato:
A colored outline.
Outline Larghezza
L' outline-width proprietà specifica la larghezza del contorno.
La larghezza può essere impostata come una dimensione specifica (in px, pt, cm, em , ecc) o utilizzando uno dei tre valori predefiniti: sottile, medio, o spesso.
Esempio
p {border: 1px solid black;}
p.one
{
outline-style: double;
outline-color: red;
outline-width: thick;
}
p.two
{
outline-style: double;
outline-color: green;
outline-width: 3px;
}
Risultato:
A thick outline.
A thinner outline.
Outline - proprietà abbreviata
Per accorciare il codice, è possibile specificare tutte le proprietà individuali contorno in una proprietà.
Il outline proprietà è una proprietà scorciatoia per le seguenti proprietà individuali contorno:
-
outline-width -
outline-style(richiesto) -
outline-color
Esempio
p {
border: 1px solid black;
outline: 5px dotted red;
}Risultato:
An outline.
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 »
Tutte le proprietà CSS Outline
| Proprietà | Descrizione |
|---|---|
| outline | Imposta tutte le proprietà di struttura in una dichiarazione |
| outline-color | Imposta il colore di uno schema |
| outline-offset | Specifica lo spazio tra un contorno e il bordo o il bordo di un elemento |
| outline-style | Imposta lo stile di uno schema |
| outline-width | Imposta la larghezza di un contorno |