Comment créer une bordure transparente avec CSS?


101

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?

Réponses:


107

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


3
Eh bien, cela a fonctionné sur ie8, Mozilla, Opera et Chrome, assez bien pour moi, je ne l'ai pas essayé sur Safari mais cela ne me dérange pas beaucoup de safari. Merci beaucoup!
William Calleja

5
Oui, c'est spécifiquement dans IE6 que cela ne fonctionne pas. IE7 est OK.
bobince

Cela n'a malheureusement pas fonctionné pour moi. J'ai fini par utiliser des pseudo après des éléments entièrement faits de frontières ... quel bordel!
Alex

51

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;


Et vous pouvez utiliser cet outil pour convertir de la couleur hexadécimale à la couleur rgba ... hexcolortool.com ... où vous pouvez éventuellement spécifier la couleur hexadécimale dans l'URL, comme ceci ... hexcolortool.com/#ffcc00
clayRay

32

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>


Eh bien, cela a fonctionné comme un charme, je me demandais juste s'il y avait un moyen plus propre de le faire? s'il était possible d'avoir une frontière invisible? merci encore pour la suggestion.
William Calleja

3
Cela me semble être une solution plus compatible
NibblyPig

Je viens de réaliser que le code fonctionne à l'opposé de ce dont vous avez besoin! Fixé. Aussi, j'irais avec la couleur transparente. Je ne savais tout simplement pas à ce sujet: D
Matt Ellen

Diminuer la bordure et augmenter le remplissage ne sert à rien si vous voulez, par exemple (mon cas), une <a/>boîte entièrement cliquable . La bordure appartient à l'élément (donc cliquable), tandis que le remplissage appartient au parent.
Nico

13

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.


4

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.


Merci beaucoup! plus j'ai d'options, mieux c'est
William Calleja

3

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.


Cela peut être un cas d'utilisation pour une bordure transparente - au lieu d'appliquer une bordure au survol, changez sa couleur de transparente à quelque chose que vous pouvez voir.
DaveWalley

2

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é.


0

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.


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.