Ist es möglich, die Farbe des Randes der Hintergrundfarbe anzupassen? In meinem Beispiel sollte es dieselbe Farbe haben, aber die Rahmenfarbe ist immer etwas dunkler als die Hintergrundfarbe.Rand und Hintergrund erscheinen als verschiedene Farben, auch wenn die Farbwerte gleich sind in CSS
.box {
min-width: 50px;
background: rgba(0, 0, 0, .2);
border: 10px solid rgba(0, 0, 0, .2);
}<div class="box">foo</div>sollten Sie geben background-clip: padding-box; (oder content-box), da standardmäßig, diese Eigenschaft auf border-box so eingestellt ist, der Hintergrund erstreckt sich auch auf den Bereich unter den Grenzen.
Der Effekt, den Sie erzielen, ist eigentlich auf eine Transparenzüberlappung zurückzuführen (mit einer Volltonfarbe würden Sie das Problem nicht bemerken), deshalb sehen Sie die Grenze etwas dunkler als die Hintergrundfarbe
.box {
min-width: 50px;
background: rgba(0, 0, 0, .2);
background-clip: padding-box;
border: 10px solid rgba(0, 0, 0, .2);
}<div class="box">foo</div>Danke, ich werde es akzeptieren, sobald ich dazu in der Lage bin. – Peter
Zusätzlich Antwort auf fcalderan ist, können Sie auch das border-color transparent machen, so dass die Hintergrundfarbe des div einfach durch kommt:
.box {
min-width: 50px;
background: rgba(0, 0, 0, .2);
border: 10px solid transparent;
}<div class="box">foo</div>Ist das '10px' nicht redundant, wenn es transparent ist? – Peter
Nein, wenn du das Element inspizierst, wirst du sehen, dass die Grenze immer noch physisch da ist, es ist nur buchstäblich trasnparent :-) –
Ja, das ist was ich meinte. Aber dein Recht, physisch ist die Grenze immer noch da. :) – Peter
Sie schreiben müssen keine zusätzliche Zeile
.box {
min-width: 50px;
background: rgba(0, 0, 0, .2);
border:10px solid rgba(0, 0, 0, .0);
}<div class="box">foo</div>Oder es kann eine andere Entscheidung sein - nur Ihre Grenze emulieren von box-shadow
.box {
min-width: 50px;
background: rgba(0, 0, 0, .2);
box-shadow:0 0 0 10px rgba(0, 0, 0, .2)
}
Es ist das gleiche colo r, es überlappt sich nur. – Goombah
Oder verwenden Sie ein Füllzeichen anstelle eines Rahmens. –