Gibt es eine einfache CSS-Methode, um den Rand eines Elements mit so etwas halbtransparent zu machen?
border-opacity: 0.7;
Wenn nicht, hat jemand eine Idee, wie ich dies ohne Verwendung von Bildern tun könnte?
Leider opacity
macht das Element das gesamte Element (einschließlich aller Texte) halbtransparent. Der beste Weg, um den Rand halbtransparent zu machen, ist das rgba-Farbformat. Dies würde beispielsweise einen roten Rand mit einer Deckkraft von 50% ergeben:
div {
border: 1px solid rgba(255, 0, 0, .5);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
Das Problem bei diesem Ansatz ist, dass einige Browser das rgba
Format nicht verstehen und überhaupt keinen Rand anzeigen, wenn dies die gesamte Deklaration ist. Die Lösung besteht darin, zwei Grenzerklärungen abzugeben. Die erste mit einer falschen Deckkraft und die zweite mit der tatsächlichen. Wenn ein Browser in der Lage ist, verwendet er den zweiten, wenn nicht, den ersten.
div {
border: 1px solid rgb(127, 0, 0);
border: 1px solid rgba(255, 0, 0, .5);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
Die erste Randdeklaration entspricht der Farbe eines zu 50% undurchsichtigen roten Randes über einem weißen Hintergrund (obwohl Grafiken unter dem Rand nicht durchbluten).
UPDATE: Ich habe "background-clip: padding-box" hinzugefügt. auf diese Antwort (gemäß dem Vorschlag von SooDesuNe in den Kommentaren), um sicherzustellen, dass der Rand auch dann transparent bleibt, wenn eine feste Hintergrundfarbe angewendet wird.
border-radius
, erhalten sie abgerundete Ecken. Wenn nicht, tun sie es nicht. Der Inhalt ist immer noch zugänglich, es sieht immer noch gut aus, es sieht einfach besser aus, wenn sie einen fähigen Browser verwenden. Ich habe in den letzten 1,5 Jahren noch nie einen Kunden dazu gebracht, sich bei jedem Projekt so zu verhalten.background-clip:padding-box;
.Verwenden Sie einfach einen festen Schatten mit einem Versatz von 0:
Wenn Sie dem Element einen Rahmenradius festlegen, erhalten Sie außerdem ziemlich abgerundete Ränder
jsFiddle Demo
quelle
box-shadow
hat keine Größe und kann Ihr Layout beschädigen, wodurch Ihre Ränder ungleichmäßig werden! jsfiddle.net/bj81hew7/2Wie andere bereits erwähnt haben: Laut CSS-3 können Sie mithilfe der
rgba(...)
Syntax eine Rahmenfarbe mit einem Deckkraftwert (Alpha) angeben.Hier ist ein kurzes Beispiel, wenn Sie es überprüfen möchten.
Es funktioniert in Safari und Chrome (funktioniert wahrscheinlich in allen Webkit-Browsern).
Es funktioniert in Firefox
Ich bezweifle, dass es überhaupt im IE funktioniert, aber ich vermute, dass es einen Filter oder ein Verhalten gibt, das es funktionieren lässt.
Es gibt auch diesen Stapelüberlauf-Beitrag , der einige andere Probleme vorschlägt - nämlich, dass der Rand über jeder von Ihnen angegebenen Hintergrundfarbe (oder jedem Hintergrundbild) gerendert wird. Dies schränkt in vielen Fällen die Nützlichkeit von Border Alpha ein.
quelle
background-clip: padding-box;
behoben werden (und bis dies unterstützt wird, können Sie die Herstellererweiterungen -webkit und -moz verwenden).Wenn Sie Ihre CSS-Codierung mit dem W3C-Validator überprüfen, werden Sie feststellen, ob Ihr CSS-Code akzeptabel ist, auch wenn er in den gängigen Browsern funktioniert hat.
Erstellen eines transparenten Rahmens über CSS, wie oben beschrieben,
wird von W3C-Standards nicht akzeptiert, auch nicht für CSS3. Ich habe den Direct Input Validator mit dem folgenden CSS-Code verwendet:
Die Ergebnisse waren:
Leider wird der Alpha-Wert (der Buchstabe "a" am Ende von "rgb") von W3C noch nicht als Teil der Randfarbwerte akzeptiert. Ich frage mich, warum es nicht standardisiert ist, da es in allen Browsern funktioniert. Das einzige Problem ist, ob Sie sich an W3C-Standards halten oder davon Abstand nehmen möchten, um etwas in CSS zu erstellen.
So verwenden Sie den W3C Online-CSS-Validator / Direct Input .
Es ist immer eine gute Idee, einen Validator zu verwenden, um Ihre Arbeit zu überprüfen. Es hilft wirklich, kleine oder sogar große Fehler beim Codieren zu finden, wenn Sie nach stundenlanger Codierungsarbeit die Augen verschränken.
quelle
* Soweit ich weiß, gibt es unter solchen Umständen nicht das, was ich normalerweise mache. Erstellen Sie einen Block darunter mit einer größeren Größe ((Rahmengröße * 2) + Originalgröße) und machen Sie ihn transparent
Hier ist ein Beispiel
Aktualisieren:
Diese Antwort ist veraltet, da diese Frage immerhin mehr als 8 Jahre alt ist. Heute unterstützen alle aktuellen Browser RGBA, Box Shadows und so weiter. Aber dies ist ein anständiges Beispiel dafür, wie es vor mehr als 8 Jahren war.
quelle
rgba(...)
. Sie können es hier ausprobieren .Als alternative Lösung, die in einigen Fällen funktionieren kann : Ändern Sie die
border-style
indotted
.Das Abwechseln von Pixelgruppen zwischen der Vordergrundfarbe und der Hintergrundfarbe entspricht nicht einer durchgehenden Linie von teilweise transparenten Pixeln. Auf der anderen Seite erfordert dies deutlich weniger CSS und ist für jeden Browser ohne browserspezifische Anweisungen viel kompatibler.
quelle
Andere Antworten befassen sich mit dem technischen Aspekt des Problems der Grenzopazität, während ich einen Hack vorstellen möchte (nur reines CSS und HTML). Erstellen Sie im Grunde ein Container-Div mit einem Border-Div und dann dem Content-Div.
Und dann das CSS: (Setzen Sie den Inhaltsrand auf "Keine" und achten Sie darauf, dass die Randdicke berücksichtigt wird.)
quelle
Versuche dies:
Und hier kommt unser magisches CSS.
Schauen Sie sich die Demo hier an.
quelle