Doble frontera con diferente color

Con Photoshop, puedo poner dos diferentes frontera a un elemento con dos de diferente color. Y con eso, puedo hacer muchas dinámicas sombra-efecto con mis elementos. Incluso con efectos de Photoshop, me pueden administrar con Sombra y Sombra Interior.

Sobre el Diseño de la Web preocupación, si he de diseño como la imagen de abajo, ¿cómo puedo lograr que con CSS? ¿Es realmente posible?

Doble frontera con diferente color

NOTA: me voy a dar dos fronteras para el blanco elemento: el borde exterior es blanco, y el borde interior es de color grisáceo. Juntos, crean un aspecto dinámico por lo que se siente como un recuadro elemento, y el blanco es el elemento almohada en relieve. Así que la cosa está un poco:

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

Pero usted sabe que es una doble declaración, y no es válido. Entonces, ¿cómo puedo gestionar tal cosa en CSS?

Y si pongo border-style: double, a continuación, usted sabe que yo no puedo pasar dos color diferente para el singe double frontera.

div.white{
       border: double white grey;
}

Además, estoy familiarizado con MENOS de Preprocesador de CSS. Así que, si tal cosa es posible usando el Preprocesador de CSS, por favor hágamelo saber.

8 Kommentare

  1. 77

    Como alternativa, puede utilizar la pseudo-elementos para hacerlo 🙂 la ventaja de la pseudo-elemento de la solución es que se puede utilizar para el espacio interior de la frontera en cualquier distancia de la frontera real, y en el fondo se mostrará a través de ese espacio. El formato:

    CSS:

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

    HTML:

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

    Si quieres fronteras que son consecutivos a cada uno de los otros (sin espacio entre ellos), se pueden utilizar varios box-shadow declaraciones (separados por comas) para hacerlo:

    CSS:

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

    HTML:

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

    • +1 para la solución agradable, sencillo y limpio!
    • cuadro sombra solución es en realidad muy fresco y sencillo, gracias. Pruebe también sin inset como en algunos casos funciona mejor sin ella.
  2. 16

    Yo uso el contorno de una css 2 propiedad que simplemente funciona. Mira esto, es simple y fáciles de animar:

    CSS:

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

    HTML:

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

    • Por desgracia, el contorno no es compatible con «radio» propiedades: «border-radius» es ignorado y «-moz-esquema-radio» sólo es compatible con Firefox.
  3. 5

    Uso de pseudo-elemento como sugiere Terry tiene un PRO y un CONTRA:

    1. PRO – gran compatibilidad con los distintos navegadores porque pseudo-elemento se apoyó también en los antiguos IE.
    2. CON – que se requiere para crear un extra (incluso si genera) elemento, que de hecho se define pseudo-elemento.

    De todos modos es una gran solución.


    OTRAS SOLUCIONES:

    Si usted puede aceptar la compatibilidad desde IE9 (IE8 no tienen soporte para este), se puede lograr el resultado deseado en los otros dos maneras posibles:

    1. utilizando outline propiedad combinada con border y una sola margen box-shadow
    2. el uso de dos box-shadow combinado con border.

    Aquí un jsFiddle con Terry‘s modificado el código que se muestra, de lado a lado, estas otras posibles soluciones. Principales propiedades específicas para cada uno de ellos son los siguientes (los demás son compartidos en .double-border clase):

    .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:

    Se le preguntó por las posibles ventajas sobre el uso de un pre-procesador gusta MENOS. I en este caso concreto, la utilidad no es tan grande, pero de todos modos usted puede optimizar algo, declarando de los colores y de la frontera/ouline/sombra con @variable.

    Aquí un ejemplo de mi código CSS, declarado de MENOS (cambiar los colores y el border-width hace 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;
    }
  4. 2

    Puede utilizar contorno con un esquema de desplazamiento de

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

    puede agregar infinita fronteras usando box-shadow usando css3
    supongamos que usted desea aplicar varias de las fronteras en un div, a continuación, código:

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

    Intentar por debajo de la estructura para la aplicación de dos colores frontera,

    <div class="white">
        <div class="grey">
        </div>
    </div>
    
    .white
    {
        border: 2px solid white;   
    }
    
    .grey
    {
        border: 1px solid grey;   
    }
    • Yap. es una manera en que yo pensaba también. Pero no lo apreciamos. De todos modos, gracias.
  7. 0

    Puede utilizar la frontera y box-shadow propiedades junto con CSS pseudo elementos para lograr un triple-frontera tipo de efecto. Vea el ejemplo de abajo para tener una idea de cómo crear tres fronteras en el fondo de un div:

    CSS:

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

    HTML:

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

    Tendrás que jugar con los valores para obtener la alineación correcta. Sin embargo, usted puede también conseguir una mayor flexibilidad, por ejemplo, 4 de las fronteras si pones algunos de los atributos en el elemento propio en lugar de la pseudo selector.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea