Können Sie in CSS eine Rahmenopazität festlegen?

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 opacitymacht 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 rgbaFormat 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.

Verwenden Sie einfach einen festen Schatten mit einem Versatz von 0:

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

Wenn Sie dem Element einen Rahmenradius festlegen, erhalten Sie außerdem ziemlich abgerundete Ränder

jsFiddle Demo

Wie 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.

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,

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

wird von W3C-Standards nicht akzeptiert, auch nicht 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:

Wertefehler: Rahmen 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") 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.

* 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

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>

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.

Als alternative Lösung, die in einigen Fällen funktionieren kann : Ändern Sie die border-stylein dotted.

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.

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.

<div class="container">
  <div class="border-box"></div>
  <div class="content-box"></div>
</div>

Und dann das CSS: (Setzen Sie den Inhaltsrand auf "Keine" und achten Sie darauf, dass die Randdicke berücksichtigt wird.)

.container {
  width: 20vw;
  height: 20vw;
  position: relative;
}
.border-box {
  width: 100%;
  height: 100%;
  border: 5px solid black;
  position: absolute;
  opacity: 0.5;
}
.content-box {
  width: 100%;
  height: 100%;
  border: none;
  background: green;
  top: 5px;
  left: 5px;
  position: absolute;
}

Versuche dies:

<h2>Snippet for making borders transparent</h2>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
    Mauris massa. Vestibulum lacinia arcu eget nulla. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim
    lacinia nunc. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
    <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod
    in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis
    turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante</b>. Suspendisse in justo eu magna luctus suscipit. Sed lectus. <i>Sed convallis tristique sem</i>.
    Integer euismod lacus luctus magna. <b>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</b>. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
    viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. <b>Suspendisse in justo eu magna luctus suscipit</b>. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. </p>
</div>
<div id="transparentBorder">
  This &lt;div&gt; has transparent borders.
</div>

Und hier kommt unser magisches CSS.

* {
  padding: 10pt;
  font: 13px/1.5 Helvetica Neue, Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;
}

b {
  font-weight: bold;
}

i {
  font-style: oblique;
}

H2 {
  font-size: 2em;
}

div[id='transparentBorder'] {
  height: 100px;
  width: 200px;
  padding: 10px;
  position: absolute;
  top: 40%;
  left: 30%;
  text-align: center;
  background: Black;
  border-radius: 4px;
  border: 10pt solid rgba(0, 0, 0, 0.5);
  -moz-background-clip: border;
  /* Firefox 3.6 */
  -webkit-background-clip: border;
  /* Safari 4? Chrome 6? */
  background-clip: border-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  -moz-background-clip: padding;
  /* Firefox 3.6 */
  -webkit-background-clip: padding;
  /* Safari 4? Chrome 6? */
  background-clip: padding-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  text-align: center;
  margin: 0;
  color: #fff;
  cursor: pointer;
}

Schauen Sie sich die Demo hier an.