attribute - title html css
CSS fuera de la frontera (6)
¿Por qué no usar simplemente background-clip ?
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
Ver:
http://caniuse.com/#search=background-clip
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
https://css-tricks.com/almanac/properties/b/background-clip
¡Quiero poder dibujar un borde FUERA DE mi Div! Entonces, si mi div es 20px por 20px, quiero un borde de 1px fuera de esto (así que, en esencia, tengo un div 22x22px de gran tamaño).
Entiendo que puedo hacer el div 22x22 para comenzar, pero por las razones que tengo, necesito las fronteras para estar afuera.
El esquema de CSS funciona, pero solo quiero una cosa con borde inferior o superior, así que lo que quiero es algo como esquema de abajo, que no funciona.
¿Hay alguna forma de hacer esto?
Gracias
Coloque su div dentro de otro div, aplique el borde al div exterior con n cantidad de relleno / margen donde n es el espacio que desea entre ellos.
Creo que tienes un poco de comprensión de las dos propiedades. El borde afecta al borde exterior del elemento, lo que hace que el elemento sea diferente en tamaño. El esquema no cambiará el tamaño o la posición del elemento (no ocupa espacio) y queda fuera del borde. Desde su descripción desea utilizar la propiedad de borde.
Mira el ejemplo simple a continuación en tu navegador:
<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>
<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>
Observe cómo el borde empuja el div inferior, pero el contorno no mueve el div superior y el contorno realmente se superpone al div inferior.
IsisCode te da una buena solución. Otra es colocar div divisorio dentro del div principal. Compruebe este ejemplo http://jsfiddle.net/A2tu9/
UPD: También puede usar un pseudo-elemento :after ( :before ), en este caso, el HTML no se contaminará con un marcado adicional:
.my-div {
position: relative;
padding: 4px;
...
}
.my-div:after {
content: '''';
position: absolute;
top: -3px;
left: -3px;
bottom: -3px;
right: -3px;
border: 1px #888 solid;
}
Demostración: http://jsfiddle.net/A2tu9/191/
Muy tarde, pero me encontré con un problema similar. Mi solución fue pseudoelementos, sin marcas adicionales, y puedes dibujar el borde sin afectar el ancho. Coloque el pseudoelemento absolutamente (con la posición principal relativamente) y el whammo.
Vea a continuación, JSFiddle aquí http://jsfiddle.net/mcx6m/
.hello {
position: relative;
// Styling not important
background: black;
color: white;
padding: 20px;
width: 200px;
height: 200px;
}
.hello:before {
content: "";
position: absolute;
display: block;
top: 0;
left: -5px;
right: -5px;
bottom: 0;
border-left: 5px solid red;
border-right: 5px solid red;
z-index: -1;
}
Prueba la propiedad de contorno W3Schools - CSS Outline
¡El esquema no interferirá con los anchos y longitudes de los elementos / divs!
Haga clic en el enlace que proporcioné en la parte inferior para ver demostraciones de las diferentes formas en que puede hacer los bordes y los bordes internos / en línea, ¡incluso los que no interrumpen las dimensiones del elemento! No es necesario agregar divs adicionales cada vez, como se menciona en otra respuesta.
También puede combinar bordes con contornos, y si lo desea, recuadros de sombras (también se muestra a través del enlace)
<head>
<style type="text/css" ref="stylesheet">
div {
width:22px;
height:22px;
outline:1px solid black;
}
</style>
</head>
<div>
outlined
</div>
Por lo general, de forma predeterminada, ''borde:'' coloca el borde en el exterior del ancho, mide y agrega a las dimensiones generales, a menos que use el valor de ''inserción'':
div {border: inset solid 1px black};
Pero ''esquema:'' es un borde adicional fuera del borde y, por supuesto, todavía agrega ancho / longitud adicional al elemento.
Espero que esto ayude
PD: También me inspiré para hacer esto por ti : uso de bordes, contornos y sombras de cuadro