¿Cómo hago un borde transparente con CSS?

Question

que tienen un li estilo como sigue:

li{ 
    display:inline-block; 
    padding:5px; 
    border:1px solid none; 
} 
li:hover{ 
    border:1px solid #FC0; 
} 

Cuando se ciernen sobre la li aparece la frontera sin hacer cambio de la li 's alrededor. ¿Es posible tener un 'borde' que no sea visible?

Answer 1

Puede usar "transparente" como color. En algunas versiones de IE, aparece como negro, pero no lo he probado desde IE6 días.

http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php

Answer 2

Se podría eliminar el borde y aumentar el relleno:

li{ 
 
     display:inline-block; 
 
     padding:6px; 
 
     border-width:0px; 
 
    } 
 
    li:hover{ 
 
     border:1px solid #FC0; 
 
     padding:5px; 
 
    }

<ul> 
 
    <li>Hovering is great</li> 
 
</ul>

Answer 3

Sí, puede utilizar border: 1px solid transparent

Otra solución es utilizar outline en vuelo estacionario (y establezca el borde en 0) que doesn Afectará el flujo de documentos:

li{ 
    display:inline-block; 
    padding:5px; 
    border:0; 
} 
li:hover{ 
    outline:1px solid #FC0; 
} 

NB. Solo puede establecer el esquema como una propiedad sharthand, no para lados individuales. Solo está destinado a ser utilizado para la depuración, pero funciona muy bien.

Answer 4

Como dijo en un comentario que cuantas más opciones tenga, mejor, aquí hay otra.

En CSS3, hay dos diferentes denominados "modelos de caja". Uno agrega el borde y el relleno al ancho de un elemento de bloque, mientras que el otro no. Puede usar este último especificando

-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
-ms-box-sizing: border-box; 
box-sizing: border-box; 

Luego, en los navegadores modernos, el elemento siempre tendrá el mismo ancho. Es decir, si aplica un borde sobre este al desplazarse, el ancho del borde no se agregará al ancho total del elemento; el borde se agregará "dentro" del elemento, por así decirlo. Sin embargo, si recuerdo correctamente, debe especificar el width explícitamente para que esto funcione. Lo cual probablemente no sea una opción para ti en este caso particular, pero puedes tenerlo en cuenta para situaciones futuras.

Answer 5

This blog entry tiene una forma de emular border-color: transparent en IE6. El siguiente ejemplo incluye el arreglo "hasLayout" que se crió en los comentarios a la entrada de blog:

/* transparent border */ 
.testDiv { 
    width: 200px; 
    height: 200px; 
    border: solid 10px transparent; 
} 
/* IE6 fix */ 
*html .testDiv { 
    zoom: 1; 
    border-color: #FEFEFE; 
    filter: chroma(color=#FEFEFE); 
} 

Asegúrese de que el border-color utilizado en la solución IE6 no se utiliza en cualquier parte del elemento .testDiv. Cambié el ejemplo de pink a #FEFEFE porque parece ser aún menos probable que se use.

Answer 6

bueno esto es la mejor solución que he tenido .. esto es CSS3

uso siguiente propiedad a su div o trasparente frontera en cualquier lugar que quieren poner

por ejemplo,

div_class { 
border: 10px solid #999; 
background-clip: padding-box; /* Firefox 4+, Opera, for IE9+, Chrome */ 
} 

esto funcionará ..

Answer 7

Muchos de ustedes deben aterrizar aquí para encontrar una solución para el borde opaco en lugar de uno transparente. En ese caso, puede usar rgba, donde a significa alpha.

.your_class { 
    height: 100px; 
    width: 100px; 
    margin: 100px; 
    border: 10px solid rgba(255,255,255,.5); 
} 

Demo

Aquí, se puede cambiar el opacity del border de 0-1

---

Si simplemente desea un borde transparente completa, lo mejor que puede utilizar es transparent, como border: 1px solid transparent;

Answer 8

La solución más fácil para esto es t o use rgba como color: border-color: rgba(0,0,0,0); que es el color del borde completamente transparente.