css - pero - imagen de fondo transparente html

¿Cómo hago un borde transparente con CSS?

Question

Tengo un li estilo de la siguiente manera:

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

Al pasar el cursor sobre el li , aparece el borde sin cambiar el li . ¿Es posible tener un ''borde'' que no sea visible?

Answer 1

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

En CSS3, hay dos diferentes llamados "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;

Entonces, en los navegadores modernos, el elemento siempre tendrá el mismo ancho. Es decir, si aplica un borde al vuelo estacionario, 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 2

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

Answer 3

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í, puedes cambiar la opacity del border de 0-1

Si simplemente desea un borde transparente completo, lo mejor es transparent , como border: 1px solid transparent;

Answer 4

Puede quitar 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 5

Puedes 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 6

Sí, puedes usar el border: 1px solid transparent

Otra solución es usar el outline al pasar el mouse (y establecer el borde en 0) que no afecta el flujo de documentos:

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

NÓTESE BIEN. 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 7

oye, esta es la mejor solución que he experimentado ... esto es CSS3

use la siguiente propiedad para su div o en cualquier lugar donde quiera poner frontera

p.ej

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

esto funcionará ..

Answer 8

Esta entrada de blog tiene una forma de emular border-color: transparent en IE6. El siguiente ejemplo incluye la corrección "hasLayout" que aparece en los comentarios de la entrada del 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 el arreglo IE6 no se use en ningún lugar del elemento .testDiv . Cambié el ejemplo de pink a #FEFEFE porque parece ser aún menos probable que se use.