Comment créer une bordure transparente avec CSS?

J'ai un listyle comme suit:

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

Lorsque je survole le, lila bordure apparaît sans faire le lidéplacement du s. Est-il possible d'avoir une «bordure» qui n'est pas visible?

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

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

Beaucoup d'entre vous doivent atterrir ici pour trouver une solution pour une bordure opaque au lieu d'une solution transparente. Dans ce cas, vous pouvez utiliser rgba, où asignifie alpha.

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

Démo

Ici, vous pouvez modifier le opacityla borderde0-1

Si vous voulez simplement une bordure transparente complète, la meilleure chose à utiliser est transparent, commeborder: 1px solid transparent;

Vous pouvez supprimer la bordure et augmenter le remplissage:

li {
  display: inline-block;
  padding: 6px;
  border-width: 0px;
}

li:hover {
  border: 1px solid #FC0;
  padding: 5px;
}

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

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

utilisez la propriété suivante pour votre div ou partout où vous voulez mettre la frontière transparente

par exemple

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

cela fonctionnera.

Oui, vous pouvez utiliser border: 1px solid transparent

Une autre solution consiste à utiliser outlineau survol (et à définir la bordure sur 0) qui n'affecte pas le flux de documents:

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

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

Puisque vous avez dit dans un commentaire que plus vous avez d'options, mieux c'est, en voici une autre.

Dans CSS3, il existe deux «modèles de boîtes» différents. L'un ajoute la bordure et le remplissage à la largeur d'un élément de bloc, tandis que l'autre ne le fait pas. Vous pouvez utiliser ce dernier en spécifiant

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

Ensuite, dans les navigateurs modernes, l'élément aura toujours la même largeur. Par exemple, si vous lui appliquez une bordure au survol, la largeur de la bordure ne s'ajoutera pas à la largeur totale de l'élément; la bordure sera ajoutée "à l'intérieur" de l'élément, pour ainsi dire. Cependant, si je me souviens bien, vous devez spécifier le widthexplicitement pour que cela fonctionne. Ce n'est probablement pas une option pour vous dans ce cas particulier, mais vous pouvez le garder à l'esprit pour les situations futures.

Cette entrée de blog a un moyen d'émuler border-color: transparentdans IE6. L'exemple ci-dessous inclut le correctif "hasLayout" qui est mentionné dans les commentaires d'entrée 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);
}

Assurez-vous que le border-colorcorrectif utilisé dans IE6 n'est utilisé nulle part dans l' .testDivélément. J'ai changé l'exemple de pinkà #FEFEFEparce que cela semble encore moins susceptible d'être utilisé.

La solution la plus simple consiste à utiliser rgbacomme couleur: border-color: rgba(0,0,0,0);c'est une couleur de bordure entièrement transparente.

Utiliser la propriété transparente

border-color : transparent;