CSS
Lineamenti
Ricerca…
Sintassi
- outline: outline-color outline-style outline-width | iniziale | ereditare;
- larghezza del contorno: medio | sottile | spesso | lunghezza | iniziale | ereditare;
- stile schema: nessuno | nascosto | punteggiato | tratteggiata | solido | doppio | groove | cresta | inserto | inizio | iniziale | ereditare;
Parametri
Parametro | Dettagli |
---|---|
tratteggiata | contorno punteggiato |
tratteggiata | contorno tratteggiato |
solido | contorno solido |
Doppio | doppio schema |
scanalatura | Il contorno scanalato 3D dipende dal valore del contorno del colore |
cresta | Il contorno tridimensionale, dipende dal valore del contorno del colore |
inserire | Il contorno dell'inserto 3D dipende dal valore del contorno del colore |
inizio | Il contorno 3D, dipende dal valore del contorno del colore |
nessuna | senza contorni |
nascosto | contorno nascosto |
Osservazioni
outline
è ora descritto nell'interfaccia utente di base , un modulo CSS Livello 3 (era già descritto in REC CSS2.1)
La proprietà struttura è definita per impostazione predefinita nei browser per gli elementi attivabili in :focus
stato di attivazione.
Non dovrebbe essere rimosso, vedi http://outlinenone.com che afferma:
Cosa fa la struttura del profilo?
Fornisce feedback visivo per i collegamenti che hanno "focus" durante la navigazione di un documento Web utilizzando il tasto TAB (o equivalente). Ciò è particolarmente utile per le persone che non possono usare un mouse o avere un danno visivo. Se rimuovi la struttura, stai rendendo il tuo sito inaccessibile per queste persone. (...)
Esempi correlati interessanti su Stack Overflow:
Panoramica
Struttura è una linea che circonda l'elemento, al di fuori del confine. A differenza del border
, i contorni non occupano spazio nel modello di riquadro. Quindi aggiungere una struttura a un elemento non influisce sulla posizione dell'elemento o di altri elementi.
Inoltre, i contorni possono essere non rettangolari in alcuni browser. Questo può accadere se outline
viene applicato su un elemento span
che contiene testo con proprietà di font-size
diverse al suo interno. A differenza dei bordi, i contorni non possono avere angoli arrotondati.
Le parti essenziali del outline
sono outline-color
outline-style
outline-width
.
La definizione di una struttura è equivalente alla definizione di una frontiera:
Un contorno è una linea attorno a un elemento. Viene visualizzato attorno al margine dell'elemento. Tuttavia, è diverso dalla proprietà del confine.
outline: 1px solid black;
outline-style
La proprietà outline-style
viene utilizzata per impostare lo stile del contorno di un elemento.
p {
border: 1px solid black;
outline-color:blue;
line-height:30px;
}
.p1{
outline-style: dotted;
}
.p2{
outline-style: dashed;
}
.p3{
outline-style: solid;
}
.p4{
outline-style: double;
}
.p5{
outline-style: groove;
}
.p6{
outline-style: ridge;
}
.p7{
outline-style: inset;
}
.p8{
outline-style: outset;
}
HTML
<p class="p1">A dotted outline</p>
<p class="p2">A dashed outline</p>
<p class="p3">A solid outline</p>
<p class="p4">A double outline</p>
<p class="p5">A groove outline</p>
<p class="p6">A ridge outline</p>
<p class="p7">An inset outline</p>
<p class="p8">An outset outline</p>