Cómo dar borde a cualquier elemento usando css sin agregar ancho de borde a todo el ancho del elemento?

Cómo dar borde a cualquier elemento usando css sin agregar ancho de borde a todo el ancho del elemento?Cómo dar borde a cualquier elemento usando css sin agregar ancho de borde a todo el ancho del elemento?

Al igual que en Photoshop que puede dar stroke- En el interior, el centro y fuera

Creo propiedades de borde CSS por defecto es el centro como centro en photoshop, estoy en lo cierto?

Quiero dar el borde dentro de la caja no afuera. y no quiero incluir el ancho del borde en el ancho del cuadro.

Fuente

2010-05-01 Jitendra Vyas

166

outline:1px solid white;

Esto no agregará el ancho y la altura adicionales.

Fuente

2011-11-29 23:22:50 abenson

Conocido: esquema no define lados, así que esto sólo funciona si se labran todos los lados. – Screenack

He agregado una respuesta que le permite delimitar solo un lado. – mikevoermans

Por lo tanto, está tratando de lograr lo mismo que el bien conocido IE box model bug? Eso no es posible. O desea admitir clientes con IE en Windows solamente y elija un doctype que fuerce IE en quirksmode.

Fuente

2010-05-01 02:34:07 BalusC

En su caso, ¿puede eliminarlo restando la mitad del borde del relleno? (-2.5 desde el relleno si su borde es de 5px de ancho, no puede tener un relleno negativo, por lo que para reducirlo, reduzca el ancho total de la caja). 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.

Fuente

2010-05-01 02:50:18 vfilby

Como dijo abenson, puede usar un outline, pero una es que Opera podría dibujar una "forma no rectangular". Otra opción que parece funcionar es utilizar los márgenes negativos, tales como el CSS:

div { 
    float:left; 
    width: 50%; 
    border:1px solid black; 
    margin: -1px; 

}

Con este código HTML:

<body> 
    <div>A block</div> 
    <div>Another block</div> 
</body>

Otra opción menos limpia es añadir marcado adicional para el html. Por ejemplo, establece el ancho de un elemento externo y agrega el borde al interno. 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>

Fuente

2012-04-26 14:19:40 ChrisD

Dependiendo de su soporte de los navegadores previsto se puede utilizar la propiedad box-shadow.

Puede establecer el valor de desenfoque en 0 y extenderlo hasta el grosor que desee. Lo bueno de la sombra de la caja es que puedes controlar si se dibuja afuera (por defecto) o adentro (usando la propiedad inset).

Ejemplo:

box-shadow: 0 0 0 1px black; // Outside black border 1px

box-shadow: 0 0 0 1px white inset; // Inside white border 1px

Una gran ventaja de usar la caja de sombra es que se puede ser creativo mediante el uso de múltiples sombras de la caja:

box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;

La única cosa que me No puedo decir cuál es la diferencia que hará que el rendimiento de la interpretación 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.

Fuente

2013-02-10 23:50:19

box-shadow es una buena opción – Ali

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 del uso de box-shadow.

Por supuesto, cambie sus propiedades de pseudo elementos, ya que necesita para 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 capacidad de utilizar las fronteras y golpear a varios lados de una caja.

Fuente

2013-05-03 16:21:59 mikevoermans

Utilice 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; 
}

Básicamente, simplemente reemplace el relleno 2px con bordes de 2px. El tamaño de div permanece igual.

Fuente

2014-01-24 21:23:15

-1

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 
}

Fuente

2014-01-24 21:24:53

Salida cuadro de dimensionamiento de CSS ...

La propiedad CSS3 cuadro de dimensionamiento puede hacer esto. El valor del cuadro de borde (a diferencia del cuadro de contenido predeterminado) hace que el cuadro final sea el ancho declarado, y cualquier borde y relleno se corten dentro del cuadro. Ahora puede declarar con seguridad que su elemento tiene un ancho del 100%, incluidos el relleno y el borde basados en píxeles, y logra su objetivo a la perfección.

-webkit-box-sizing: border-box;/* Safari/Chrome, otro WebKit */
-moz-box-sizing: border-box;/* Firefox, otro Gecko */
tamaño de caja: border-box;/* Opera/IE 8+ */

Sugiero crear un mixin para manejar esto para usted. Puede encontrar más información sobre el tamaño de caja en el W3C http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Fuente

2014-07-31 23:05:46 Chad

Esta es la mejor respuesta, aunque no creo que realmente necesite todos los prefijos. http://caniuse.com/#feat=css3-boxsizing – Justin

^Justin está en lo correcto, ya no necesitas los prefijos. 'tamaño de caja' será suficiente. – Chad

Esta debería ser la respuesta aceptada IMO. Soluciona el problema hasta su núcleo ... –

Uso box-sizing: border-box con el fin de crear un borde DENTRO un div sin modificar la anchura div.

Uso outline para crear una frontera FUERA un div sin modificar la anchura div.

Aquí un ejemplo: https://jsfiddle.net/4000cae9/1/

Notas: border-box actualmente no es compatible con IE

Soporte:

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>

Fuente

2015-03-17 14:07:29 GibboK

contorno: 3px negro sólido || frontera: 3px sólido negro

div{ 
 
height:50px; 
 
width:150px; 
 
text-align:center; 
 

 
} 
 

 
div{ /*this is what you need ! */ 
 
outline:1px solid black 
 
}

<div> 
 
hello world 
 
</div>

Fuente

2017-11-13 08:34:02

Cómo dar borde a cualquier elemento usando css sin agregar ancho de borde a todo el ancho del elemento?

Respuesta

Cuestiones relacionadas