¿Cómo dar borde a cualquier elemento usando css sin agregar ancho de borde a todo el ancho del elemento?
Como en Photoshop, podemos dar trazos: adentro, centro y afuera
Creo que las propiedades de borde CSS predeterminadas están centradas como centro en Photoshop, ¿verdad?
Quiero dar un borde dentro de la caja, no afuera. y no desea incluir el ancho del borde en el ancho del cuadro.
Respuestas:
outline:1px solid white;Esto no agregará el ancho y la altura adicionales.
Mira el tamaño de caja de CSS ...
La propiedad CSS3 de tamaño de caja puede hacer esto. El valor del cuadro de borde (a diferencia del valor predeterminado del cuadro de contenido) hace que el cuadro renderizado final tenga el ancho declarado y cualquier borde y relleno se corten dentro del cuadro. Ahora puede declarar de forma segura que su elemento tiene un ancho del 100%, incluido el relleno y el borde basados en píxeles, y lograr su objetivo a la perfección.
Sugeriría crear un mixin para manejar esto por ti. Puede encontrar más información sobre el tamaño de las cajas en W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
box-sizingSerá suficiente.
Dependiendo de la compatibilidad de su navegador, puede utilizar la box-shadowpropiedad.
Puede establecer el valor de desenfoque en 0 y la extensión al grosor que desee. Lo mejor de la sombra del cuadro es que puede controlar si se dibuja afuera (por defecto) o adentro (usando la insetpropiedad).
Ejemplo:
box-shadow: 0 0 0 1px black; // Outside black border 1pxo
box-shadow: 0 0 0 1px white inset; // Inside white border 1pxUna gran ventaja de usar la sombra de caja es que puede ser creativo usando varias sombras de caja:
box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;Lo único que no puedo decir es la diferencia que esto hará que el rendimiento del renderizado sea sabio. Asumiría que podría convertirse en un problema si tuviera cientos de elementos usando esta técnica en la pantalla a la vez.
Me encontré con el mismo problema.
.right-border {
position: relative;
}
.right-border:after {
content: '';
display: block;
position: absolute;
top: 0; right: 0;
width: 1px;
height: 100%;
background: #e0e0e0;
}Esta respuesta le permite especificar un solo lado. Y funcionaría en IE8 +, a diferencia de usar box-shadow.
Por supuesto, cambie las propiedades de sus pseudo elementos ya que necesita seleccionar un lado específico.
* Nuevo y mejorado *
&:before {
content: '';
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}Esto permite la posibilidad de usar bordes y golpear varios lados de una caja.
Úselo box-sizing: border-boxpara crear un borde DENTRO de un div sin modificar el ancho del div.
Úselo outlinepara crear un borde FUERA de un div sin modificar el ancho del div.
Aquí un ejemplo: https://jsfiddle.net/4000cae9/1/
Notas:
border-boxactualmente no es compatible con IE
Apoyo:
http://caniuse.com/#feat=outline
http://caniuse.com/#search=border-box
#test, #test2 {
width: 100px;
height:100px;
background-color:yellow;
}
#test {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 10px dashed blue;
}
#test2 {
outline: 10px dashed red;
}
<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>Como dijo Abenson, puedes usar un contorno, pero un problema es que Opera podría dibujar una "forma no rectangular". Otra opción que parece funcionar es usar márgenes negativos, como este css:
div {
float:left;
width: 50%;
border:1px solid black;
margin: -1px;
}Con este html:
<body>
<div>A block</div>
<div>Another block</div>
</body>Otra opción menos limpia es agregar un marcado adicional al html. Por ejemplo, establece el ancho de un elemento exterior y agrega el borde al interior. El CSS:
.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }Y el html:
<body>
<div class="outer">
<div class="inner">A block</div>
</div>
<div class="outer">
<div class="inner">Another block</div>
<div>
</body>Use relleno cuando no haya borde. Retire el relleno cuando haya un borde.
.myDiv {
width: 100px;
height: 100px;
padding-left: 2px;
padding-right: 2px;
}
.myDiv:hover {
padding-left: 0;
padding-right: 0;
border-left: 2px solid red;
border-right: 2px solid red;
}Esencialmente, simplemente reemplace el relleno de 2px con bordes de 2px. El tamaño de div sigue siendo el mismo.
En su caso, ¿puede modificarlo restando la mitad del borde del relleno? (-2,5 del relleno si su borde tiene 5 px de ancho, no puede tener un relleno negativo, por lo que para reducirlo, reduzca el ancho total del cuadro). Puede agregar 2.5px adicionales al margen para mantener el cuadro general del mismo tamaño.
Realmente no me gusta esta sugerencia, pero no creo que haya una manera de manejar esto limpiamente.
Otra opción, si su color de fondo es sólido:
body { background-color: #FFF; }
.myDiv {
width: 100px;
height: 100px;
border: 3px solid #FFF; // Border is essentially invisible since background is also #FFF;
}
.myDiv:hover {
border-color: blue; // Just change the border color
}#FFFpor transparente y luego no es necesario que recuerde cambiar dos valores. Su sugerencia tiene la ventaja de que si necesitara un borde punteado, esto funcionaría donde box-shadowfalte en este sentido.
contorno: 3px negro sólido || borde: 3px negro sólido
div{
height:50px;
width:150px;
text-align:center;
}
div{ /*this is what you need ! */
outline:1px solid black
}<div>
hello world
</div>