Wie mache ich eine transparente Grenze mit CSS?

Question

Ich habe ein li wie folgt gestylt:

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

Als ich über die li ohne die Grenze erscheint bewegen sich um die li ‚s Verschiebung zu machen. Ist es möglich, eine "Grenze" zu haben, die nicht sichtbar ist?

Answer 1

Sie können "transparent" als Farbe verwenden. In einigen Versionen von IE erscheint das als schwarz, aber ich habe es seit den IE6-Tagen nicht mehr getestet.

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

Answer 2

Sie konnten die Grenze entfernen und erhöhen die padding:

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 3

Yep, können Sie border: 1px solid transparent

Eine andere Lösung zu verwenden ist outline auf schweben verwenden (und den Rand auf 0 setzen), was nicht funktioniert Auswirkungen auf den Dokumentenfluss:

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

NB. Sie können die Gliederung nur als Sharthand-Eigenschaft und nicht für einzelne Seiten festlegen. Es ist nur zum Debuggen gedacht, aber es funktioniert gut.

Answer 4

Da Sie in einem Kommentar gesagt haben, dass je mehr Optionen Sie haben, desto besser, hier ist eine andere.

In CSS3 gibt es zwei verschiedene sogenannte "Box-Modelle". Einer fügt den Rahmen und den Abstand zur Breite eines Blockelements hinzu, der andere nicht. Sie können letzteres verwenden, indem Sie

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

angeben. Dann wird das Element in modernen Browsern immer die gleiche Breite haben. Das heißt, wenn Sie bei Hover einen Rahmen darauf anwenden, wird die Breite des Rahmens nicht zur Gesamtbreite des Elements beitragen. Die Grenze wird sozusagen "innerhalb" des Elements hinzugefügt. Wenn ich mich jedoch richtig erinnere, müssen Sie explizit width angeben, damit dies funktioniert. Das ist wahrscheinlich keine Option für Sie in diesem speziellen Fall, aber Sie können es für zukünftige Situationen berücksichtigen.

Answer 5

This blog entry hat eine Möglichkeit, in IE6 border-color: transparent zu emulieren. Das folgende Beispiel enthält die „hasLayout“ Update, das oben in den Blog-Eintrag Kommentare gebracht wird:

/* transparent border */ 
.testDiv { 
    width: 200px; 
    height: 200px; 
    border: solid 10px transparent; 
} 
/* IE6 fix */ 
*html .testDiv { 
    zoom: 1; 
    border-color: #FEFEFE; 
    filter: chroma(color=#FEFEFE); 
} 

Vergewissern Sie sich, dass die border-color im IE6 fix verwendet wird, nicht überall in der .testDiv Element verwendet wird. Ich habe das Beispiel von pink zu #FEFEFE geändert, weil das noch weniger wahrscheinlich scheint.

Answer 6

hey das ist die beste Lösung, die ich erleben immer .. das ist CSS3

Gebrauch Ihres div folgende Eigenschaft oder irgendwo mögen Sie setzen Grenze trasparent

z.B.

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

das wird funktionieren ..

Answer 7

Viele von Ihnen müssen hier landen, um eine Lösung für undurchsichtige statt transparente Grenze zu finden. In diesem Fall können Sie rgba verwenden, wobei a für alpha steht.

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

Demo

Hier können Sie die opacity des border von 0-1

---

ändern Wenn Sie einfach eine vollständige transparente Grenze wollen, ist das Beste, was zu verwenden ist transparent, wie border: 1px solid transparent;

Answer 8

Die einfachste Lösung hierfür ist t o Verwenden Sie rgba als die Farbe: border-color: rgba(0,0,0,0); Das ist völlig transparente Rahmenfarbe.