Duda con :before

[xmarcosx]

Hola a todos, es mi primer post aquí dado que recién me estoy iniciando en css.

Paso a la duda a ver si pueden explicarme.

qué diferencias tengo entre estos 2 ejemplos, dado que el segundo me funciona y el primero no.

y cómo podría hacer para que el primero funcionase?

Ejemplo 1

Código:

#container {  
  background: #FFF;
  margin:0 auto; 
  width:1010px; 
  border-radius: 10px 10px 10px 10px; 
  -moz-linear-gradient(center top , #FFFFFF, #EEEEEE); 
  -moz-box-shadow: 0px 0px 5px #000000; 
  -webkit-box-shadow: 0px 0px 5px #000000;box-shadow: 0 0 2px rgba(0, 0, 0,   
  0.2), 0 1px 1px rgba(0, 0, 0, 0.2), 0 3px 0 #FFFFFF, 0 4px 0 rgba(0, 0, 0, 0.2), 0 
  6px 0 #FFFFFF, 0 7px 0 rgba(0, 0, 0, 0.2); 
}

#container:before {
    border: 1px dashed #CCCCCC;
    bottom: 5px;
    box-shadow: 0 0 0 1px #FFFFFF;
    content: "";
    left: 5px;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: -1;
}

Ejemplo 2

Código:

#containerbg {
    background-color: #FFFFFF;
    background-image: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE);
    border-radius: 10px 10x 10px px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.2), 0 3px 0 
    #FFFFFF, 0 4px 0 rgba(0, 0, 0, 0.2), 0 6px 0 #FFFFFF, 0 7px 0 rgba(0, 0, 0, 0.2);
    height: 240px;
    left: 50%;
    margin: -150px 0 0 -230px;
    padding: 30px;
    position: absolute;
    top: 50%;
    width: 1010px;
    z-index: 0;
}
#containerbg:before {
    border: 1px dashed #CCCCCC;
    bottom: 5px;
    box-shadow: 0 0 0 1px #FFFFFF;
    content: "";
    left: 5px;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: -1;
}

La idea es ponerle un borde interno a un div "container" con 5 px de separación del borde del div.

No sé si me explico.

En segundo lugar,
si "container" fuese una clase y no una ID.
funcionaría?
Cómo podría hacerlo?

Muchas gracias

[undakel]

Hola, lo primero, el resultado no varía si es una ID o una clase en este caso.

El problema que tienes es en el uso de position absolute, es decir, el primero te funcionaria si no tuviera position absolute y quizás añadiría un display si ves que no funciona.

Un saludo

[xmarcosx]

Hola undakel,

Gracias por responder,
Le quité el "position: absolute;" y no veo la diferencia.
Decías de poner un display como hago eso? me podes explicar?

lo que quiero lograr es hacer un borde con el pespunte, similar a esto:



Alguna ayuda?