Una sombra de píxel en tres lados usando la sombra de caja CSS3

Necesito crear una sombra de un píxel en tres lados de un elemento usando la sombra de caja. Estoy usando el siguiente código, excepto que está creando un borde de dos píxeles, pero solo necesito uno.Una sombra de píxel en tres lados usando la sombra de caja CSS3

-moz-box-shadow: 0 1px 1px #c00 
-webkit-box-shadow: 0 0 1px 0 #c00 
     box-shadow: 0 0 1px 0 #c00

Fuente

2011-03-18 Cofey

Cualquier razón por la que no esté utilizando 'border: 1px solid # c00'? – ChrisR

Sí, porque el borde extenderá los bordes del modelo de caja de los elementos, lo que causará problemas. Lo siento, debería haber dicho sombra en lugar de frontera. ;-) – Cofey

"borde extenderá los bordes del modelo de caja de los elementos, lo que causará problemas" - está bien, hay dos posibilidades allí. 1. Use un margen negativo de los lados con el borde para invertir el efecto del modelo de caja. 2. Utilice ['box-sizing: border-box;'] (http://css-tricks.com/box-sizing/), que funciona en IE 8 y en otros navegadores recientes. –

Trate 3 sombras, sin desenfoque. http://jsfiddle.net/leaverou/8tgAp/1/

body { 
    width: 300px; 
    height: 200px; 
    margin: 20px auto; 

    -moz-box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00; 
    -webkit-box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00; 
    box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00; 
}

Fuente

2011-03-19 16:43:55

No tenía idea de que pudiera aplicar múltiples 'box-shadow's. Buena cosa. Ahí está la respuesta, allí mismo. –

Ni siquiera necesita 3 sombras de caja, 2 son suficientes - http://jsfiddle.net/Razvan/VxzvQ/ –

@RazvanCercelaru Esto deja un píxel en la parte superior sin bordes, consulte: http://jsfiddle.net/ leaverou/VxzvQ/2/Esto puede o no ser aceptable, dependiendo del caso de uso. –

Usando la declaración frontera lo normal es el camino a seguir, pero si por cualquier razón-eres-no pueden utilizar frontera, entonces usted puede ocultar un lado de la sombra con la: antes o: después de seudo -selector.

Ejemplo:

body {background-color: #000; color: #fff} 

.module { 
    height: 100px; 
    width: 100px; 
    background-color: #000; 
    -moz-box-shadow: 0 0 2px #f00; 
    -webkit-box-shadow: 0 0 2px #f00; 
    box-shadow: 0 0 2px #f00; 
} 

.module:before { 
    content: ''; 
    border-top: solid #000 1px; 
    display: block; 
    position: relative; 
    top: -1px; 
}

Usted puede verlo en acción aquí: http://jsfiddle.net/3nspR/

Fuente

2011-03-19 07:59:48 Duopixel

Una sombra de píxel en tres lados usando la sombra de caja CSS3

Respuesta

Cuestiones relacionadas