Bordo doppio CSS con bordo esterno più spesso del bordo interno

Question

Nel mio lavoro corrente mi viene richiesto di produrre un doppio bordo su un contenitore. Lo stile di confine: doppio; raggiungere questo, tuttavia il mio cliente desidera che il bordo esterno sia più spesso & il bordo interno sia dello spessore normale.

Oltre alla creazione di 2 div, 1 nidificato all'interno di un altro con div esterno di spessore maggiore o tramite l'uso di immagini di bordo esiste un modo per farlo con i CSS con solo 1 div? specificando border-style: double; ed essere ancora in grado di rendere il bordo esterno più spesso.

Answer 1

I contorni sono inclusi nelle specifiche CSS3 e consentono di applicare un bordo e un contorno a un singolo elemento.

La proprietà outline è identica al comando border. La proprietà offset aggiuntiva tuttavia consente al bordo di essere spostato ulteriormente all'interno o all'esterno dell'elemento.

Ho utilizzato i contorni per assegnare bordi a 2 colori diversi, modificare il codice per assegnare ai bordi 2 dimensioni diverse.

#box { 
border: 1px double #000; 
outline: 2px solid #699; 
outline-offset: -9px; 
}

Answer 2

No, non è possibile. La larghezza del bordo CSS specifica lo spessore totale del bordo, indipendentemente dallo stile del bordo. Non vedo un modo migliore di avvolgerlo in un altro DIV.

Edit: Si potrebbe incidere in utilizzando outline, ma c'è un subtle difference between outline and border.

border: double 4px black; 
outline: solid 3px black; 

(questo produrrà un 1px "confine" esterno interno e 4px, se si può chiamare così)

Answer 3

Oppure si potrebbe usare un'immagine di confine con quella roba nuova fantasia in CSS3, anche se wouldn essere supportato nella maggior parte dei browser attualmente usati

Answer 4

È inoltre possibile utilizzare la: prima di pseudo-elemento in questo modo:

https://stackoverflow.com/a/11179169/1468708

In modo che si può avere un doppio bordo con diverso spessore proprio in fondo, per esempio.