Border CSS (Frontiere)
proprietà dei bordi CSS
CSS proprietà dei bordi consentono di specificare lo stile del bordo di un elemento e colore.
Stile bordo
proprietà di stile Border specifica quale da visualizzare tipo di frontiera.
proprietàborder-style è usato per definire lo stile del bordo
valore border-style:
none: Nessun bordo predefinito
punteggiato: punteggiato: Definisce un tendone
tratteggiata: Definisce un riquadro tratteggiato
solido: la definizione di confine solido
doppio: definire due confini. Gli stessi valori della larghezza di due confine e bordo-larghezza
scanalatura: scanalatura definita bordo 3D. L'effetto dipende dai valori di colore del confine
Ridge: la definizione 3D dorsale di confine. L'effetto dipende dai valori di colore del confine
inserto: Definisce un bordo 3D incorporato. L'effetto dipende dai valori di colore del confine
Fin dall'inizio: Definisce un bordo fin dall'inizio in 3D. L'effetto dipende dai valori di colore del confine
Prova: impostare lo stile del bordo
Spessore bordo
È possibile specificare la larghezza del bordo dall'attributo border-width.
Specifica la larghezza del bordo in due modi: è possibile specificare la lunghezza del valore, come ad esempio 2px o 0.1em, oppure utilizzare una delle tre parole chiave, che sono sottili, medio (default) e di spessore.
Nota: I CSS non definiscono tre parole chiave larghezza specifica, per cui un utente può essere il sottile, medio e grosso, rispettivamente, posto uguale a 5px, 3px, e 2px, mentre un altro agente utente, rispettivamente impostato 3px, 2px e 1px.
Esempi
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
Prova »
Colore bordo
proprietà border-color imposta il colore del bordo. È possibile impostare il colore:
- nome - Specifica il nome del colore, come "rosso"
- RGB - specificare un valore RGB, come ad esempio "rgb (255,0,0)"
- Hex - Specifica il valore esadecimale, come "# ff0000"
È inoltre possibile impostare il colore del bordo di "trasparente".
Nota: border-color da solo non funziona, è necessario disporre di utilizzare il border-style per impostare lo stile del bordo.
Esempi
{
border-style: solido;
border-color: red;
}
p.two
{
border-style: solido;
border-color: # 98bf21;
}
Prova »
Border - impostazioni separate per ciascun lato
In CSS, è possibile specificare diversi lati diversi confini:
Esempi
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
Prova »
L'esempio di cui sopra può anche impostare un singolo attributo:
proprietà border-style può avere uno a quattro valori:
- border-style: doppio solido punteggiato tratteggiata ;
- I confini sono punteggiate
- bordo destro è solido
- Un bordo doppio fondo
- bordo sinistro è tratteggiata
- border-style: punteggiato solido doppio;
- I confini sono punteggiate
- A sinistra e bordo destro è solido
- Un bordo doppio fondo
- border-style: punteggiato solido;
- Sul fondo è bordo punteggiato
- confini destra e sinistra sono solidi
- border-style: dotted;
- Circondato da un bordo punteggiato
L'esempio precedente utilizza lo stile di confine. Tuttavia, può anche essere border-width, border-color insieme.
Border - proprietà abbreviata
L'esempio precedente utilizza un sacco di proprietà per impostare il confine.
T È anche possibile impostare il confine in una proprietà.
È possibile attributo "confine" set:
- border-width
- border-style (richiesto)
- border-color
Altri esempi
Tutte le proprietà del bordo in una dichiarazione di essere
Questo esempio mostra una proprietà scorciatoia per impostare tutte e quattro le proprietà del bordo nella stessa istruzione.
Impostazione stile del bordo
Questo esempio mostra come impostare lo stile del bordo inferiore.
Impostare la larghezza del bordo sinistro
Questo esempio mostra come impostare la larghezza del bordo sinistro.
Impostare il colore dei quattro bordi
Questo esempio mostra come impostare il colore dei quattro bordi. È possibile impostare uno a quattro colori.
Impostare il colore del bordo destro
Questo esempio mostra come impostare il colore del bordo destro.
proprietà dei bordi CSS
| proprietà | descrizione |
|---|---|
| confine | proprietà scorciatoia utilizzato per impostare la proprietà dei quattro lati in un comunicato. |
| border-style | Viene utilizzato per impostare lo stile del bordo di tutti gli elementi, o separatamente impostare lo stile del bordo per ogni lato. |
| border-width | Tutte le proprietà scorciatoia confine imposta la larghezza per l'elemento, o impostare individualmente la larghezza di entrambi i lati del confine. |
| border-color | Proprietà Stenografia, l'elemento di tutta la porzione di colori bordo visibile, o impostare il colore, rispettivamente quattro lati. |
| border-bottom | proprietà scorciatoia utilizzata per impostare tutti gli attributi del confine per una dichiarazione. |
| border-bottom-color | Impostare il colore del bordo inferiore dell'elemento. |
| -Bottom border-style | Impostare gli elementi di stile di confine. |
| border-bottom-width | Impostare la larghezza del bordo inferiore dell'elemento. |
| border-sinistra | proprietà scorciatoia utilizzata per impostare tutte le proprietà del bordo sinistro di una dichiarazione. |
| border-left-color | Impostare il colore dell'elemento bordo sinistro. |
| border-left-style | L'elemento dello stile bordo sinistro. |
| border-left-width | L'elemento della larghezza del bordo sinistro. |
| border-right | proprietà scorciatoia per settare tutte le proprietà a destra della casella per una dichiarazione. |
| border-right-color | Impostare il colore dell'elemento bordo destro. |
| border-right-style | L'elemento degli stili bordo destro. |
| border-right-width | Impostare la larghezza dell'elemento bordo destro. |
| border-top | proprietà scorciatoia per settare tutte le proprietà al confine con una dichiarazione. |
| border-top-color | Elemento è impostato sul colore del bordo. |
| -Top border-style | Elemento è impostato sullo stile di confine. |
| border-top-width | Elemento è impostato sulla larghezza del bordo. |