Wie erstelle ich mit CSS einen transparenten Rahmen?

Ich habe einen liStil wie folgt:

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

Wenn ich über die liGrenze schwebe, erscheint sie, ohne dass sich das liverschiebt. Ist es möglich, eine 'Grenze' zu haben, die nicht sichtbar ist?

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

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

Viele von Ihnen müssen hier landen, um eine Lösung für eine undurchsichtige Grenze anstelle einer transparenten zu finden. In diesem Fall können Sie verwenden rgba, wo asteht für alpha.

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

Demo

Hier können Sie die Änderung opacityder bordervon0-1

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

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>

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

Verwenden Sie die folgende Eigenschaft für Ihr Div oder überall dort, wo Sie die Grenze durchsichtig setzen möchten

z.B

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

das wird funktionieren..

Ja, du kannst verwenden border: 1px solid transparent

Eine andere Lösung ist die Verwendung outlinedes Hovers (und das Setzen des Rahmens auf 0), die den Dokumentfluss 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 gut.

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 beim Hover einen Rahmen darauf anwenden, wird die Breite des Rahmens nicht zur Gesamtbreite des Elements hinzugefügt. Der Rand wird sozusagen "innerhalb" des Elements hinzugefügt. Wenn ich mich jedoch richtig erinnere, müssen Sie die widthexplizit angeben, damit dies funktioniert. Dies ist in diesem speziellen Fall wahrscheinlich keine Option für Sie, aber Sie können dies für zukünftige Situationen berücksichtigen.

Dieser Blogeintrag kannborder-color: transparent in IE6 emuliert werden . Das folgende Beispiel enthält den Fix "hasLayout", der in den Kommentaren zu den Blogeinträgen 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 border-colorim IE6-Fix verwendete .testDivElement nirgendwo im Element verwendet wird. Ich habe das Beispiel von pinkin geändert , #FEFEFEda dies noch weniger wahrscheinlich ist.

Die einfachste Lösung hierfür ist die Verwendung rgbaals Farbe: border-color: rgba(0,0,0,0);Das ist eine vollständig transparente Rahmenfarbe.

Verwenden Sie eine transparente Eigenschaft

border-color : transparent;