Più "Try it Yourself" esempi di seguito.
Definizione e utilizzo
Un profilo è una linea che viene disegnata attorno agli elementi (outside the borders) per rendere l'elemento "stand out" .
La proprietà outline-style specifica lo stile di un contorno.
| Valore di default: | none |
|---|---|
| Inherited: | no |
| animatable: | no. Read about animatable |
| Versione: | CSS2 |
| sintassi JavaScript: | object .style.outlineStyle="dashed" Try it |
Suggerimenti e Note
Un profilo è una linea intorno ad un elemento. Viene visualizzata attorno al margine dell'elemento. Tuttavia, è differente dalla struttura confine.
Il contorno non è una parte di dimensioni dell'elemento, quindi larghezza e altezza proprietà dell'elemento non contengono la larghezza del contorno.
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
| Proprietà | |||||
|---|---|---|---|---|---|
| outline-style | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Note: IE8 supporta la proprietà outline-style solo se viene specificato un DOCTYPE!.
CSS Sintassi
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;I valori delle proprietà
| Valore | Descrizione | Gioca |
|---|---|---|
| none | Specifica senza contorno. Questa è l'impostazione predefinita | Gioca " |
| hidden | Specifica un contorno nascosta | Gioca " |
| dotted | Specifica un contorno tratteggiato | Gioca " |
| dashed | Specifica un contorno tratteggiato | Gioca " |
| solid | Specifica una linea continua | Gioca " |
| double | Specifica un doppio outliner | Gioca " |
| groove | Specifica un contorno scanalato 3D. L'effetto dipende dal valore outline-color | Gioca " |
| ridge | Specifica un contorno increspato 3D. L'effetto dipende dal valore outline-color | Gioca " |
| inset | Specifica un contorno 3D inserto. L'effetto dipende dal valore outline-color | Gioca " |
| outset | Specifica un contorno fin 3D. L'effetto dipende dal valore outline-color | Gioca " |
| initial | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale | Gioca " |
| inherit | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Altri esempi
Esempio
Impostare lo stile di una struttura utilizzando valori diversi:
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;} Prova tu stesso " Pagine correlate
CSS tutorial: Outline CSS
Riferimento CSS: outline property
Di riferimento HTML DOM: outlineStyle property