In che modo i browser determinano quali colori esatti utilizzare per il bordo: inserto o inizio?

Question

Se si specifica border: 1px outset blue; come stile per un elemento, il browser esegue il rendering di due colori di bordo diversi: uno per i bordi superiore e sinistro e un altro per i bordi inferiore e destro.

li 
 
    { border: 10px outset #0000FF; 
 
    color: #FFF; 
 
    background-color: #0000FF; 
 
    width: 30%; 
 
    } 
 

 
p 
 
    { margin: 1em 2em; 
 
    text-align: center; 
 
    }

<li><p>Hi!</p></li>

dato un singolo colore specificato per il bordo, come fa il browser a determinare quali colori per rendere il confine in? In alternativa, dato un comp grafico (ad esempio .PSD) che mostra un bordo esterno con due colori diversi, come posso scegliere un colore del bordo singolo da specificare per ottenere i risultati più vicini al comp?

Answer 1

Non v'è alcun algoritmo di uno specified by CSS:

UA possono scegliere il proprio algoritmo per calcolare i colori effettivamente utilizzati.

Browser diversi fanno cose molto diversi:

• Firefox fonde il confine clou con piena bianca (circa il 57%) e il confine LowLight con piena nero (circa il 68%).

• Opera fonde i bordi con bianco e nero meno fortemente (25% ciascuno).

• WebKit (Safari, Chrome) unisce il bordo inferiore a nero (33%) lasciando il bordo evidenziato come colore dichiarato non trattato.

• IE suddivide la larghezza del bordo in due quando si utilizza riquadro/inizio. La metà interna del bordo presenta un'ombra scura del 75% di nero e un colore di evidenziazione intatto. La metà esterna del bordo ha un colore di evidenziazione ombreggiato dal 25% al ​​nero e un colore di scarsa illuminazione ombreggiato dal 50% al nero. Questo ha l'effetto di riprodurre lo stile del bordo del pulsante Windows 9x/NT4/2000 se la larghezza del bordo è 2px.

Sfortunatamente non è possibile ottenere risultati coerenti con margini di entrata/uscita/scanalatura/costa. Spesso i risultati sono diversi ma ancora OK attraverso i browser; se questo non è abbastanza, dovrai specificare esplicitamente ciascun colore del lato del bordo.