Doppio bordo con colore diverso

Question

Con Photoshop, posso aggiungere due bordi diversi a un elemento con due colori diversi. E con questo, posso creare molti effetti cromatici dinamici con i miei elementi. Anche con gli effetti di Photoshop, posso gestirlo con Drop Shadow e Inner Shadow.

Per quanto riguarda la progettazione Web, se ho un disegno simile all'immagine qui sotto, come posso ottenerlo con i CSS? È davvero possibile?

NOTA: sto dando due bordi per l'elemento bianco: il bordo esterno è bianco, e il confine interno è grigio. Insieme, creano un aspetto dinamico in modo che sembri un elemento inserto e l'elemento bianco sia in rilievo. Quindi la cosa è un po ':

div.white{ 
    border: 2px solid white; 
    border: 1px solid grey; 
} 

Ma si sa che è una doppia dichiarazione e non è valida. Quindi, come posso gestire tale cosa nei CSS?

E se metto border-style: double allora sai che non posso passare due colori diversi per il bordo del singolo double.

div.white{ 
     border: double white grey; 
} 

Inoltre, ho familiarità con LESS CSS Preprocessor. Quindi, se una cosa del genere è possibile utilizzando CSS Preprocessor, per favore fatemelo sapere.

Answer 1

In alternativa, è possibile utilizzare pseudo-elementi a farlo :) il vantaggio della soluzione pseudo-elemento è che si può utilizzare per lo spazio bordo interno a una distanza arbitraria dal bordo effettivo, e lo sfondo mostrerà attraverso quello spazio. Il markup:

body { 
 
    background-image: linear-gradient(180deg, #ccc 50%, #fff 50%); 
 
    background-repeat: no-repeat; 
 
    height: 100vh; 
 
} 
 
.double-border { 
 
    background-color: #ccc; 
 
    border: 4px solid #fff; 
 
    padding: 2em; 
 
    width: 16em; 
 
    height: 16em; 
 
    position: relative; 
 
    margin: 0 auto; 
 
} 
 
.double-border:before { 
 
    background: none; 
 
    border: 4px solid #fff; 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 4px; 
 
    left: 4px; 
 
    right: 4px; 
 
    bottom: 4px; 
 
    pointer-events: none; 
 
}

<div class="double-border"> 
 
    <!-- Content --> 
 
</div>

Se volete confini che sono consecutivi l'uno all'altro (senza spazio tra di loro), è possibile utilizzare più box-shadow dichiarazioni (separati da virgole) per farlo:

body { 
 
    background-image: linear-gradient(180deg, #ccc 50%, #fff 50%); 
 
    background-repeat: no-repeat; 
 
    height: 100vh; 
 
} 
 
.double-border { 
 
    background-color: #ccc; 
 
    border: 4px solid #fff; 
 
    box-shadow: 
 
    inset 0 0 0 4px #eee, 
 
    inset 0 0 0 8px #ddd, 
 
    inset 0 0 0 12px #ccc, 
 
    inset 0 0 0 16px #bbb, 
 
    inset 0 0 0 20px #aaa, 
 
    inset 0 0 0 20px #999, 
 
    inset 0 0 0 20px #888; 
 
    /* And so on and so forth, if you want border-ception */ 
 
    margin: 0 auto; 
 
    padding: 3em; 
 
    width: 16em; 
 
    height: 16em; 
 
    position: relative; 
 
}

<div class="double-border"> 
 
    <!-- Content --> 
 
</div>

Answer 2

prova sottostante struttura per l'applicazione di due colore confine,

<div class="white"> 
    <div class="grey"> 
    </div> 
</div> 

.white 
{ 
    border: 2px solid white; 
} 

.grey 
{ 
    border: 1px solid grey; 
} 

Answer 3

io uso ac contorno ss 2 proprietà che funziona semplicemente. Check this out, è semplice e anche facile da animare:

.double-border { 
 
    display: block; 
 
    clear: both; 
 
    background: red; 
 
    border: 5px solid yellow; 
 
    outline: 5px solid blue; 
 
    transition: 0.7s all ease-in; 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
.double-border:hover { 
 
    background: yellow; 
 
    outline-color: red; 
 
    border-color: blue; 
 
}

<div class="double-border"></div>

Answer 4

L'uso della pseudo-elemento come suggerisce Terry ha una PRO e una CON:

1. PRO: ottima compatibilità cross-browser perché lo pseudo-elemento è supportato anche su IE precedente.
2. CON: richiede la creazione di un elemento aggiuntivo (anche se generato), che infatti è definito pseudo-elemento.

In ogni caso è un'ottima soluzione.

---

ALTRE SOLUZIONI:

Se si può accettare la compatibilità dal IE9 (IE8 does not have support for this), è possibile raggiungere il risultato desiderato in altri due modi possibili:

1. utilizzando outline proprietà combinato con border e un singolo insertobox-shadow
2. utilizzando due box-shadow combinato con border.

Here a jsFiddle con codice Terry s' modificato che mostra, fianco a fianco, queste altre possibili soluzioni. Principali proprietà specifiche per ciascuno di essi sono i seguenti (gli altri sono condivisi in .double-border classe):

.left 
{ 
    outline: 4px solid #fff; 
    box-shadow:inset 0 0 0 4px #fff; 
} 

.right 
{ 
    box-shadow:0 0 0 4px #fff, inset 0 0 0 4px #fff; 
} 

---

codice meno:

avete chiesto possibili vantaggi di usare un pre-processor come LESS . In questo caso specifico, l'utilità non è così grande, ma in ogni caso è possibile ottimizzare qualcosa, dichiarando colori e border/ouline/shadow con @variable.

Ecco un esempio del mio codice CSS, ha dichiarato in meno (colori cangianti e border-width diventa molto veloce):

@double-border-size:4px; 
@inset-border-color:#fff; 
@content-color:#ccc; 

.double-border 
{ 
    background-color: @content-color; 
    border: @double-border-size solid @content-color; 
    padding: 2em; 
    width: 16em; 
    height: 16em; 
    float:left; 
    margin-right:20px; 
    text-align:center; 
} 

.left 
{ 
    outline: @double-border-size solid @inset-border-color; 
    box-shadow:inset 0 0 0 @double-border-size @inset-border-color; 
} 

.right 
{ 
    box-shadow:0 0 0 @double-border-size @inset-border-color, inset 0 0 0 @double-border-size @inset-border-color; 
} 

Answer 5

È possibile utilizzare contorno con contorno compensata

<div class="double-border"></div> 
.double-border{ 
background-color:#ccc; 
outline: 1px solid #f00; 
outline-offset: 3px; 
} 

Answer 6

puoi aggiungere bordi infiniti usando box-shadow usando css3 supponiamo di voler applicare più bordi su una div, quindi il codice è come:

div { 
    border-radius: 4px; 
    /* #1 */ 
    border: 5px solid hsl(0, 0%, 40%); 

    /* #2 */ 
    padding: 5px; 
    background: hsl(0, 0%, 20%); 

    /* #3 
    outline: 5px solid hsl(0, 0%, 60%); */ 

    /* #4 AND INFINITY!!! (CSS3 only) */ 
    box-shadow: 
     0 0 0 10px red, 
     0 0 0 15px orange, 
     0 0 0 20px yellow, 
     0 0 0 25px green, 
     0 0 0 30px blue; 
} 

Answer 7

Forse alcune stanze contorno

<div class="borders"> 
     Hello 
    </div> 

    .borders{ 
    border: 1px solid grey; 
    outline: 2px solid white; 
    } 

https://jsfiddle.net/Ivan5646/5eunf13f/

Answer 8

È possibile utilizzare le proprietà del bordo e box-shadow insieme con elementi CSS pseudo per ottenere una sorta triplo confine di effetto. Vedere l'esempio di seguito per un'idea di come creare tre confini in fondo a un div:

.triple-border:after { 
 
    content: " "; 
 
    display: block; 
 
    width: 100%; 
 
    background: #FFE962; 
 
    height: 9px; 
 
    padding-bottom: 8px; 
 
    border-bottom: 9px solid #A3C662; 
 
    box-shadow: -2px 11px 0 -1px #34b6af; 
 
}

<div class="triple-border">Triple border bottom with multiple colours</div>

Dovrete giocare con i valori per ottenere il corretto allineamento. Tuttavia, puoi anche ottenere una maggiore flessibilità, ad es. 4 bordi se si mettono alcuni degli attributi nell'elemento corretto piuttosto che lo pseudo-selettore.