web-dev-qa-db-fra.com

Comment créer une bordure transparente avec CSS?

J'ai un li dont le style est le suivant:

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

Lorsque je survole le li, la bordure apparaît sans que le li se décale. Est-il possible d'avoir une "frontière" qui n'est pas visible?

csstransparencyborder-color
94
William Calleja

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

104
Douglas

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

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

Démo

Ici, vous pouvez changer le opacity du border de 0-1

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

46
Mr. Alien

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>
30
Matt Ellen

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

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

par exemple.

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

cela fonctionnera ..

11
Raau

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, pas pour des côtés individuels. Il est uniquement destiné à être utilisé pour le débogage, mais cela fonctionne bien.

4
DisgruntledGoat

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

En CSS3, il existe deux "modèles de boîte" différents. L'un ajoute la bordure et le remplissage à la largeur d'un élément de bloc, l'autre 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 en survol, sa largeur n’ajoutera rien à 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 explicitement le width pour que cela fonctionne. Ce qui n'est probablement pas une option pour vous dans ce cas particulier, mais vous pouvez le garder à l'esprit pour des situations futures.

3
ЯegDwight

Cette entrée de blog a un moyen d'émuler border-color: transparent dans IE6. L'exemple ci-dessous inclut le correctif "hasLayout" qui apparaît dans les commentaires de l'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-color utilisé dans le correctif IE6 n’est utilisé nulle part dans le .testDiv élément. J'ai changé l'exemple de pink en #FEFEFE parce que cela semble encore moins susceptible d’être utilisé.

2
Sonny

La solution la plus simple consiste à utiliser rgba comme couleur: border-color: rgba(0,0,0,0);, couleur de bordure totalement transparente.

0
Jake Wilson