Comment créer une bordure transparente avec CSS?

Question

J'ai un style Li comme suit:

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

J'ai besoin de ça quand je survole la frontière de Li, la frontière apparaît sans la faire basculer. Est-il possible d'avoir une "frontière" qui n'est pas visible?

Answer 1

Vous pouvez utiliser "transparent" comme couleur. Dans certaines versions d'IE, cela apparaît en noir, mais je ne l'ai pas testé depuis IE6.

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

Answer 2

Beaucoup d'entre vous doivent être en débarquant ici afin de trouver une solution pour opaque de la frontière au lieu de se faire dans la transparence. Dans ce cas, vous pouvez utiliser rgbaoù a représente alpha.

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

Démo

Ici, vous pouvez modifier l' opacity de la border de 0-1

---

Si vous souhaitez simplement une complète transparence de la frontière, la meilleure chose à utiliser est - transparent, comme border: 1px solid transparent;

Answer 3

Vous pouvez supprimer la bordure et augmenter le rembourrage:

     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 4

hé c'est la meilleure solution que j'ai jamais expérimenté .. c'est CSS3

utiliser la propriété suivante à votre div ou partout où vous voulez mettre frontière trasparent

par exemple

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

cela fonctionnera ..

Answer 5

Oui, vous pouvez utiliser border: 1px solid transparent

Une autre solution consiste à utiliser outline en survol (et à définir la bordure sur 0), ce qui n’affecte pas le flux de documents:

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

NB Vous pouvez uniquement définir le contour en tant que propriété sharthand, et non pour des côtés individuels. Il est uniquement destiné à être utilisé pour le débogage, mais cela fonctionne bien.