it-swarm.com.de

Wie mache ich mit CSS einen transparenten Rahmen?

Ich habe ein li wie folgt gestaltet:

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

Wenn ich mich über dem li befinde, erscheint der Rand, ohne dass sich das li verschiebt. Ist es möglich, einen nicht sichtbaren Rand zu haben?

94
William Calleja

Sie können "transparent" als Farbe verwenden. In einigen IE-Versionen wird dies als Schwarz angezeigt, aber ich habe es seit den IE6-Tagen nicht mehr getestet.

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

104
Douglas

Viele von Ihnen müssen hier landen, um eine Lösung für eine undurchsichtige anstelle einer transparenten 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 das opacity des border von 0-1 Ändern.


Wenn Sie einfach einen vollständigen transparenten Rahmen wünschen, ist transparent das Beste, was Sie verwenden können, wie border: 1px solid transparent;

46
Mr. Alien

Sie können den Rand entfernen und die Polsterung erhöhen:

    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

hey, das ist die beste Lösung, die ich je erlebt habe. Das ist CSS3

verwendet folgende Eigenschaft für dein Div oder irgendwo, wo du den Rand transparent machen willst

z.B.

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

das wird funktionieren..

11
Raau

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

Eine andere Lösung besteht darin, outline beim Hover zu verwenden (und den Rand auf 0 zu setzen), was den Dokumentenfluss nicht beeinflusst:

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

NB. Sie können den Umriss nur als Sharthand-Eigenschaft festlegen, nicht für einzelne Seiten. Es ist nur zum Debuggen gedacht, funktioniert aber einwandfrei.

4
DisgruntledGoat

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

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

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

In modernen Browsern hat das Element dann immer die gleiche Breite. Wenn Sie also mit der Maus einen Rahmen darauf anwenden, wird die Breite des Rahmens nicht zur Gesamtbreite des Elements hinzugefügt. Der Rand wird sozusagen "innerhalb" des Elements eingefügt. Wenn ich mich jedoch richtig erinnere, müssen Sie width explizit angeben, damit dies funktioniert. Was in diesem speziellen Fall wahrscheinlich keine Option für Sie ist, aber Sie können es für zukünftige Situationen im Hinterkopf behalten.

3
ЯegDwight

Dieser Blogeintrag hat eine Möglichkeit, border-color: transparent In IE6 zu emulieren. Das folgende Beispiel enthält die Korrektur "hasLayout", die in den Kommentaren des Blogeintrags angezeigt 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);
}

Stellen Sie sicher, dass das im IE6-Fix verwendete border-color Nicht im Element .testDiv Verwendet wird. Ich habe das Beispiel von pink in #FEFEFE Geändert, weil es noch weniger wahrscheinlich ist, dass es verwendet wird.

2
Sonny

Die einfachste Lösung besteht darin, rgba als Farbe zu verwenden: border-color: rgba(0,0,0,0); Das ist eine vollständig transparente Rahmenfarbe.

0
Jake Wilson