Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.
Non-standard
Questa funzionalità non è standard e non è parte di un processo di standardizzazione. Non utilizzarla in siti accessibili dal Web: non funzionerà per tutti gli utenti. Inoltre si potrebbero verificare incompatibilità sostanziali tra le implementazioni, ed il comportamento potrebbe cambiare in futuro.
Nelle applicazioni di Mozilla come Firefox, la proprietà di CSS -moz-border-bottom-colors imposta una lista di colori per il bordo inferiore.
/* Single <color> value */ -moz-border-bottom-colors: #f0f0f0; /* Multiple <color> values */ -moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000; /* Global values */ -moz-border-bottom-colors: inherit; -moz-border-bottom-colors: initial; -moz-border-bottom-colors: unset;
Quando un elemento ha un margine che è più grande di un singolo pixel CSS, tutta la linea dei pixel assume il colore accanto specificato in questa proprietà, dall'esterno verso l'interno.Questo elimina il bisogno di box annidati.Se il margine è più largo del numero dei colori specificati, la rimanente parte del margine è del colore specificato più interno.
| Initial value | none |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
It does not apply
- if
border-styleisdashedordotted. - to tables with
border-collapse: collapse.
Sintassi
Valori
Accetta una lista di colori separati dallo spazio.
- <color>
-
Specifica il colore di una linea di pixel del margine inferiore. Il trasparente è valido.Vedi i valori
<color>per le unità possibili. - none
- Di default, nessun colore è applicato o è usato
border-color, se specificato.
Sintassi
<color>+ | nonewhere
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
Esempio
<div id="example">Example</div>
#example {
padding: 20px;
background-color: gray;
border: 10px solid black;
-moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
-moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
-moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
-moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
}
Specificazioni
QUesta proprietà non è parte di nessun specificazione.
Compatibilità dei browser
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
| Basic support | Chrome No support No | Edge No support No | Firefox
No support
1 — 59
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Edge Mobile No support No | Firefox Android
No support
4 — 59
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- No support
- No support
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- See implementation notes.
- See implementation notes.