English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
l'attributo border-style CSS è utilizzato per impostare l'attributo di stile di singola cornice, ossiaborder-top-style,border-right-style,border-bottom-styleeborder-left-styleproprietà abbreviate.
La tabella seguente fornisce una descrizione dell'uso e la cronologia delle versioni di questa proprietà, nonché la sintassi dell'uso di questa proprietà nei script JavaScript.
| valore predefinito: | nessuno |
|---|---|
| applicabile a: | tutti gli elementi |
| ereditarietà: | nessuno |
| animabile: | novedere anche proprietà animata. |
| versione: | CSS 1, 2, 3 |
| sintassi JavaScript: | oggetto object.style.borderStyle="dotted double" |
La sintassi di questa proprietà è la seguente:
border-style: [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] 1 a 4 valori | initial | inherit
questo abbreviatore può avere un, due, tre o quattro valori separati da spazi.
se specificatoun valorequindi viene applicato a tutte e quattro le cornici.
se specificatidue valoriquindi il primo valore viene applicato alle cornici superiore e inferiore, mentre il secondo valore viene applicato alle cornici destra e sinistra.
se specificatitre valoriquindi il primo valore si applica alla cornice superiore, il secondo valore si applica alle cornici laterali, il terzo valore si applica alla cornice inferiore.
se specificatiquattro valorise specificati, ciascun valore viene applicato in ordine superiore, destro, inferiore e sinistro alla cornice.
L'esempio seguente dimostra come utilizzare l'attributo border-style.
p {
border-style: doppio;
border-width: 5px;
}prova a vedere‹/›La tabella seguente descrive i valori di questa proprietà.
| valore | descrizione |
|---|---|
| nessuno | senza bordo visibile. |
| hidden | Con lo stesso none, la differenza sta nel fatto che le celle della tabella hannoBordo ripiegatoE due celle condividono il bordo. Il valore hidden assicura che il bordo non venga disegnato, poiché hidden ha la priorità su tutti gli altri stili di bordo. |
| dotted | Mostra il bordo come una serie di punti. |
| dashed | Mostra il bordo come una serie di segmenti corti, ossia trattini. |
| solid | Mostra il bordo come una linea continua. |
| double | Mostra il bordo come due linee parallele con una certa distanza tra di loro. La somma delle due linee e lo spazio tra di loro deve essere uguale aborder-widthdel valore. |
| groove | Mostra uno spigolo intagliato nel tela. Da un altro lato, crea un'impresione 3D, spesso realizzata usando un colore più chiaro del colore del bordo.border-colorCreando un'ombra con due colori più chiari e più scuri. |
| ridge | Mostra uno spigolo di bordo opposto all'effetto. Da un altro lato, crea un'impresione 3D, dove il bordo sembra venire fuori dal tela. |
| inset | Mostra uno spigolo di bordo come se fosse incorporato nel tela. Crea un'impresione 3D, spesso realizzata creando un'ombra con due colori, più scuri del colore del bordo.border-colorSfumature leggermente più chiare e più scure. |
| outset | Mostra uno spigolo di bordo opposto all'effetto. Da un altro lato, crea un'impresione 3D, dove il bordo fa sembrare la scatola come se uscisse dal tela. |
| inherit | Se specificato, l'elemento correlato adotta il valore della proprietà border-top-style dell'elemento padre. |
Compatibilità del browser per la proprietà border-style, i numeri nella tabella sotto rappresentano la versione minima del browser che supporta la proprietà; tutti i browser mainstream supportano questa proprietà.
Supporto del browser –
|
Attenzione: Internet Explorer 7 e versioni precedenti non supportano il valore hidden. Internet Explorer 8 lo supporta, ma richiede un<!DOCTYPE>.Supportato da Internet Explorer 9 e versioni successive.
Vedere la guida:CSS Border,CSS3 Border.
Proprietà correlate:border,border-width,border-color,border-top-style,border-right-style,border-bottom-style,border-left-style.