html Colocando borde dentro de div y no en su borde





5 Answers

También puedes usar box-shadow así:

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/ ( http://jsfiddle.net/nVyXS/ mouse para ver el borde)

Esto funciona solo en los navegadores modernos. Por ejemplo: No hay soporte para IE 8. Ver caniuse.com (característica box-shadow) para más información.

html css css3 border

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í es 100px x 100px, y si agrego un borde, entonces tengo que hacer algunas matemáticas para hacer que aparezca el borde.

¿Hay alguna forma en que pueda hacer que aparezca el borde y asegurar que el cuadro seguirá siendo de 100 px (incluido el borde)?




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 como las palabras clave "borde interior" me aterrizaron directamente aquí, me gustaría compartir algunos hallazgos que vale la pena mencionar aquí. Cuando estaba agregando un borde en el estado de desplazamiento, obtuve los efectos de los que habla OP. El borde de los anuncios de píxeles a la dimensión de la caja que lo hizo saltar. Hay dos maneras más 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 adicionales, pero la posición del elemento no será rápida

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

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



para una representación consistente entre los navegadores nuevos y antiguos, agregue un contenedor doble, el exterior con el ancho, el interno con el borde.

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

esto es obviamente solo si su ancho preciso es más importante que tener un margen de beneficio adicional.




Si utiliza el tamaño de cuadro: cuadro de borde significa no solo borde, relleno, margen, etc. Todo el elemento entrará dentro del elemento principal.

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>




Related