Perché non ha il bordo-stile: doppio; render?

Question

Ho un h1 su cui ho definito i seguenti stili:

h1 
    { text-align: center; 
    border: double black 1px; 
    padding: 1em; 
    margin: 1em; 
} 

Ecco un JSfiddle: http://jsfiddle.net/KatieK/Hs3ZQ/

ho impostato il border-style per raddoppiare, ma sto solo vedendo un singolo bordo reso. Perché non è un rendering di doppio bordo?

Answer 1

double visualizza due linee rette che si sommano alla quantità di pixel definita come larghezza del bordo (source).

Avrete bisogno di usare almeno 3px.

h1 
    { text-align: center; 
    border: double black 3px; 
    padding: 1em; 
    margin: 1em; 
} 

http://jsfiddle.net/Hs3ZQ/6/

Answer 2

1px è troppo sottile per il rendering di un doppio bordo, sarà necessario rendere il bordo più spesso.

h1 
    { text-align: center; 
    border: double black 3px; 
    padding: 1em; 
    margin: 1em; 
} 

http://jsfiddle.net/Hs3ZQ/3/

Answer 3

Per un doppio bordo, è necessario impostare una larghezza di bordo di almeno 3px-see the effect.

Answer 4

Rimozione di 1px da CSS funzionerà ...

h1 
    { text-align: center; 
    border: double black; 
    padding: 1em; 
    margin: 1em; 
} 

vedere il violino aggiornamento: http://jsfiddle.net/Hs3ZQ/5/