Können Sie die Deckkraft des Rahmens in CSS festlegen?

Question

Gibt es eine geradlinige CSS-Methode, um den Rand eines Elements halbtransparent mit etwas wie diesem zu machen?

border-opacity: 0.7;

Wenn nicht, hat jemand eine Idee, wie ich das ohne Bilder machen kann?

Answer 1

Leider ist die opacity macht das gesamte Element (einschließlich Text) halbtransparent. Die beste Möglichkeit, den Rahmen halbtransparent zu machen, ist das Farbformat rgba. Dies würde zum Beispiel einen roten Rahmen mit 50 % Deckkraft 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 */
}

Bei sehr alten Browsern, die rgba nicht unterstützen (IE8 und älter), besteht die Lösung darin, zwei Randdeklarationen bereitzustellen. Die erste mit einer gefälschten Deckkraft und die zweite mit der tatsächlichen. Wenn ein Browser fähig ist, wird er die zweite verwenden, wenn nicht, wird er die erste verwenden.

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 auf weißem Hintergrund (wobei Grafiken unter dem Rand nicht durchscheinen).

Ich habe hinzugefügt background-clip: padding-box; zu den obigen Beispielen, um sicherzustellen, dass der Rahmen transparent bleibt, auch wenn eine einfarbige Hintergrundfarbe verwendet wird.

Answer 2

Es ist ganz einfach: Verwenden Sie einen Vollschatten mit 0 Offset:

#foo {
  border-radius: 1px;
  box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);       
}

Wenn Sie dem Element einen border-radius zuweisen, erhalten Sie außerdem hübsche abgerundete Ränder.

jsFiddle-Demo

Answer 3

Wie andere bereits erwähnt haben, unterstützt CSS3 die rgba(...) Syntax, um eine Rahmenfarbe mit einem Opazitätswert (Alpha) anzugeben.

Hier ist eine kurze JSFiddle-Demo wenn Sie es überprüfen möchten.

• Es funktioniert in Safari und Chrome (wahrscheinlich auch in allen Webkit-Browsern).

• Es funktioniert in Firefox

• Ich bezweifle, dass es im IE überhaupt funktioniert, aber ich vermute, dass es einen Filter oder ein Verhalten gibt, mit dem es funktioniert.

Außerdem gibt es CSS-RGBA-Rahmen/Hintergrund-Alpha doppelt was auf einige andere Probleme hindeutet - nämlich, dass der Rahmen über jede Hintergrundfarbe (oder jedes Hintergrundbild) gerendert wird, die Sie angegeben haben; dadurch wird die Nützlichkeit von Rahmen-Alpha in vielen Fällen eingeschränkt.

Answer 4

Wenn Sie Ihre CSS-Codierung mit dem W3C-Validator überprüfen, werden Sie sehen, ob Ihr CSS-Code akzeptabel ist, auch wenn er in den gängigen Browsern funktioniert.

Erstellen eines transparenten Rahmens per CSS, wie oben beschrieben,

border: 1px solid rgba(255, 0, 0, .5);

wird von den W3C-Standards nicht akzeptiert, nicht einmal für CSS3. Ich habe den Direct Input Validator mit dem folgenden CSS-Code verwendet,

.test { border: 1px solid rgba(255, 0, 0, .5); }

Die Ergebnisse waren,

Value Error : border Zu viele Werte oder Werte werden nicht erkannt : 1px solid rgba(255,0,0,0.5 )

Leider wird der Alpha-Wert (der Buchstabe "a" am Ende von "rgb") vom W3C noch nicht als Teil der Randfarbwerte akzeptiert. Ich frage mich allerdings, warum er nicht standardisiert ist, da er in allen Browsern funktioniert. Die einzige Schwierigkeit besteht darin, ob man sich an die W3C-Standards halten oder von ihnen abweichen und etwas in CSS erstellen möchte.

Zu verwenden W3C online CSS-Validator / Direkte Eingabe .

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 in der Codierung zu finden, wenn Sie nach stundenlanger Codierungsarbeit schielen.

Answer 5

*Soweit ich weiß, gibt es das nicht. Normalerweise erstelle ich unter solchen Umständen einen Block mit einer größeren Größe ((borderize*2)+originalsize) und mache ihn transparent mit

filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

Hier ist ein Beispiel

#main{
    width:400px;
    overflow:hidden;
    position:relative;
}
.border{
    width:100%;
    position:absolute;
    height:100%;
    background-color:#F00;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
.content{
    margin:15px;/*size of border*/
    background-color:black;
}
<div id="main">
    <div class="border">
    </div>
    <div class="content">
        testing
    </div>
</div>

Aktualisierung:

Diese Antwort ist veraltet, denn schließlich ist diese Frage schon mehr als 8 Jahre alt. Heute unterstützen alle aktuellen Browser rgba, box shadows und so weiter. Aber dies ist ein anständiges Beispiel, wie es vor 8+ Jahren war.