We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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 valuenone
Applies toall elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

It does not apply

  1. if border-style is dashed or dotted.
  2. 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> ]* <color> | none

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support No No1 — 591 2 No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No No No4 — 591 2 No No No

1. In Firefox 59, the property was limited to usage in chrome code only (See bug 1417200).

2. In Firefox 60, the property was removed completely (See bug 1429723).

See also

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: ZhuYihui
Ultima modifica di: ZhuYihui,