Borde doble con diferente color

Con Photoshop, puedo poner dos bordes diferentes en un elemento con dos colores diferentes. Y con eso, puedo hacer muchos efectos dynamics de sombreado con mis elementos. Incluso con los efectos de Photoshop, puedo manejar eso con Drop Shadow y Inner Shadow.

En cuanto al diseño web, si tengo un diseño como el de la imagen siguiente, ¿cómo puedo lograrlo con CSS? ¿Es realmente posible?
borde con diferente color

NOTA: Doy dos bordes al elemento blanco: el borde exterior es blanco y el borde interior es grisáceo. Juntos, crean una apariencia dinámica para que se sienta como un elemento insertado, y el elemento blanco está estampado en forma de almohada. Entonces, la cosa es un poco:

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

Pero sabes que es una statement doble y no es válida. Entonces, ¿cómo puedo administrar tal cosa en CSS?

Y si pongo border-style: double entonces sabes que no puedo pasar dos colores diferentes para el borde double singe.

 div.white{ border: double white grey; } 

Además, estoy familiarizado con LESS CSS Preprocessor. Entonces, si tal cosa es posible usando el preprocesador CSS, por favor avíseme.

Alternativamente, puede usar pseudo-elementos para hacerlo 🙂 la ventaja de la solución de pseudo-elemento es que puede usarla para espaciar el borde interno a una distancia arbitraria del borde real, y el fondo se mostrará a través de ese espacio . El marcado:

 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; } 
 

Uso la propiedad outline a css 2 que simplemente funciona. Mira esto, es simple e incluso fácil de animar:

 .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; } 
 

El uso de pseudo-elemento como lo sugiere Terry tiene un PRO y un CON:

  1. PRO: excelente compatibilidad entre navegadores porque los pseudo-elementos son compatibles también en IE más antiguos.
  2. CON – se requiere crear un elemento extra (incluso si se genera), que de hecho se define pseudo-elemento .

De todos modos es una gran solución.


OTRAS SOLUCIONES :

Si puede aceptar la compatibilidad desde IE9 ( IE8 no tiene soporte para esto ), puede lograr el resultado deseado en otras dos formas posibles:

  1. usando la propiedad de outline combinada con el border y una sola box-shadow insertada
  2. usando dos box-shadow combinadas con border .

Aquí un jsFiddle con el código modificado de Terry que muestra, al lado del otro, estas otras soluciones posibles. Las principales propiedades específicas para cada una son las siguientes (otras se comparten en clase .double-border ):

 .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; } 

MENOS código :

Pidió posibles ventajas sobre el uso de un pre-procesador como LESS. En este caso específico, la utilidad no es tan buena, pero de todos modos podrías optimizar algo, declarando colores y borde / línea / sombra con @variable .

Aquí un ejemplo de mi código CSS, declarado en MENOS ( cambiar los colores y el ancho del borde se vuelve muy rápido ):

 @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; } 

Tal vez use la propiedad del esquema

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

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

puede agregar bordes infinitos usando box-shadow usando css3 suponga que desea aplicar múltiples bordes en un div, entonces el código es como:

 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; } 

Puede usar el contorno con el contorno del contorno

 
.double-border{ background-color:#ccc; outline: 1px solid #f00; outline-offset: 3px; }

Pruebe debajo de la estructura para aplicar dos bordes de color,

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

Puede usar las propiedades de borde y sombra de cuadro junto con los pseudo elementos CSS para lograr un tipo de efecto de triple borde. Consulte el ejemplo siguiente para obtener una idea de cómo crear tres bordes en la parte inferior de 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; } 
 
Triple border bottom with multiple colours