[Html] Colocando el borde dentro de div y no en su borde


Answers

También puedes usar box-shadow como este:

div{
    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
    box-shadow:inset 0px 0px 0px 10px #f00;
}

Ejemplo aquí: http://jsfiddle.net/nVyXS/ (desplácese para ver el borde)

Esto funciona en navegadores modernos solamente. Por ejemplo: Sin soporte IE 8. Consulte caniuse.com (función de sombreado) para obtener más información.

Question

Tengo un elemento <div> y quiero ponerle un borde. Sé que puedo escribir style="border: 1px solid black" , pero esto agrega 2px a cada lado del div, que no es lo que quiero.

Prefiero que este borde sea -1px desde el borde del div. El div en sí mismo es 100px x 100px, y si agrego un borde, entonces tengo que hacer algunas matemáticas para que aparezca el borde.

¿Hay alguna manera de que pueda hacer que aparezca el borde y asegúrese de que el cuadro siga siendo de 100 píxeles (incluido el borde)?




Si usa tamaño de caja: border-box significa no solo borde, relleno, margen, etc. Todos los elementos entrarán dentro del elemento padre.

div p {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 150px;
    height:100%;
    border: 20px solid #f00;
    background-color: #00f;
    color:#fff;
    padding: 10px;
  
}
<div>
  <p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>




Yahoo! Esto es realmente posible. Lo encontré.

Para el borde inferior:

div {box-shadow: 0px -3px 0px red inset; }

Para el borde superior:

div {box-shadow: 0px 3px 0px red inset; }



Sé que esto es algo más antiguo, pero dado que las palabras clave "border inside" me aterrizaron directamente aquí, me gustaría compartir algunos hallazgos que pueden valer la pena mencionar aquí. Cuando estaba agregando un borde en el estado de desplazamiento, obtuve los efectos de los que OP está hablando. El borde muestra píxeles de la dimensión del cuadro que lo hizo saltar. Hay otras dos maneras en que uno puede lidiar con esto que también funciona para IE7.

1) Tener un borde ya unido al elemento y simplemente cambiar el color. De esta manera las matemáticas ya están incluidas.

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

div:hover {
   border: 2px dashed #666;
}

2) Compense su borde con un margen negativo. Esto aún agregará los píxeles extra, pero el posicionamiento del elemento no será nervioso

div {
   width:100px;
   height:100px;
   background-color: #aaa;
}

div:hover {
  margin: -2px;
  border: 2px dashed #333;
}