Czy możesz ustawić krycie granic w CSS?

Czy istnieje prosty sposób CSS na uczynienie granicy elementu półprzezroczystym za pomocą czegoś takiego?

border-opacity: 0.7;

Jeśli nie, to czy ktoś ma pomysł, jak to zrobić bez użycia obrazów?

Niestety ten opacityelement sprawia, że ​​cały element (w tym dowolny tekst) jest półprzezroczysty. Najlepszym sposobem na uczynienie obramowania półprzezroczystym jest użycie formatu kolorów rgba. Na przykład dałoby to czerwoną ramkę z 50% kryciem:

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 */
}

Problem z tym podejściem polega na tym, że niektóre przeglądarki nie rozumieją rgbaformatu i nie wyświetlają żadnych ramek, jeśli jest to cała deklaracja. Rozwiązaniem jest dostarczenie dwóch deklaracji granicznych. Pierwszy z fałszywym kryciem, a drugi z faktycznym. Jeśli przeglądarka jest w stanie, użyje drugiego, jeśli nie, użyje pierwszego.

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 */
}

Pierwsza deklaracja na granicy będzie miała kolor równoważny 50% nieprzezroczystej czerwonej ramce na białym tle (chociaż grafika pod ramką nie będzie się przeciekać).

AKTUALIZACJA: Dodałem „klip w tle: padding-box;” na tę odpowiedź (zgodnie z sugestią SooDesuNe w komentarzach), aby zapewnić, że ramka pozostanie przezroczysta, nawet jeśli zastosowany zostanie jednolity kolor tła.

To proste, użyj jednolitego cienia z przesunięciem 0:

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

Ponadto, jeśli ustawisz promień obramowania dla elementu, daje to dość zaokrąglone granice

jsFiddle Demo

Jak wspomnieli inni: CSS-3 mówi, że możesz użyć rgba(...)składni, aby określić kolor obramowania z wartością krycia (alfa).

Oto szybki przykład, jeśli chcesz to sprawdzić.

• Działa w Safari i Chrome (prawdopodobnie działa we wszystkich przeglądarkach internetowych).

• Działa w przeglądarce Firefox

• Wątpię, czy w ogóle działa w IE, ale podejrzewam, że jest jakiś filtr lub zachowanie, które sprawi, że będzie działać.

Jest też ten post z przepełnieniem stosu , który sugeruje kilka innych problemów - mianowicie, że obramowanie wyświetla na wierzchu dowolnego określonego przez ciebie koloru tła (lub obrazu tła); ograniczając w ten sposób przydatność granicy alfa w wielu przypadkach.

Jeśli sprawdzisz kodowanie CSS za pomocą walidatora W3C, zobaczysz, czy Twój kod CSS jest akceptowalny, nawet jeśli działał w głównych przeglądarkach.

Tworzenie przezroczystej ramki za pomocą CSS, jak napisano powyżej,

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

nie jest akceptowany przez standardy W3C, nawet dla CSS3. Użyłem walidatora bezpośredniego wprowadzania z następującym kodem CSS,

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

Rezultaty były

Błąd wartości: obramowanie Zbyt wiele wartości lub wartości nie jest rozpoznawanych: 1px solid rgba (255,0,0,0,5)

Niestety, wartość alfa (litera „a” na końcu „rgb”) nie jest jeszcze akceptowana przez W3C jako część wartości kolorów obramowania. Zastanawiam się, dlaczego nie jest znormalizowany, ponieważ działa we wszystkich przeglądarkach. Jedynym problemem jest to, czy chcesz trzymać się standardów W3C, czy odejść od tego, aby stworzyć coś w CSS.

Aby korzystać z walidatora CSS online W3C / wprowadzania bezpośredniego .

Zawsze dobrym pomysłem jest użycie sprawdzania poprawności do sprawdzenia pracy, naprawdę pomaga znaleźć małe lub nawet duże błędy w kodowaniu, gdy spojrzysz sobie w oczy po godzinach pracy nad kodowaniem.

* O ile wiem, nie ma co normalnie robię w takich okolicznościach, to utworzyć blok o większym rozmiarze ((rozmiar * 2) + rozmiar oryginału) i uczynić go przezroczystym za pomocą

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

Oto przykład

#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>

Aktualizacja:

Ta odpowiedź jest nieaktualna, ponieważ w końcu to pytanie ma ponad 8 lat. Obecnie wszystkie aktualne przeglądarki obsługują rgba, shadows'y i tak dalej. Ale to jest dobry przykład, jak było ponad 8 lat temu.

Jako alternatywne rozwiązanie, które może pracować w niektórych przypadkach: zmiana border-styledo dotted.

Posiadanie naprzemiennych grup pikseli między kolorem pierwszego planu i kolorem tła to nie to samo, co ciągła linia częściowo przezroczystych pikseli. Z drugiej strony wymaga to znacznie mniej CSS i jest o wiele bardziej kompatybilny w każdej przeglądarce bez żadnych dyrektyw specyficznych dla przeglądarki.

Inne odpowiedzi dotyczą technicznego aspektu problemu z kryciem granic, podczas gdy chciałbym przedstawić hack (tylko CSS i HTML). Zasadniczo utwórz div pojemnika, mający div granicy, a następnie div zawartości.

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

A następnie CSS: (ustaw granicę zawartości na none, zadbaj o takie pozycjonowanie, aby uwzględnić grubość ramki)

.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;
}

Nie, nie ma sposobu, aby ustawić tylko krycie granicy za pomocą css.

Na przykład, jeśli nie znasz koloru , nie ma sposobu, aby zmienić krycie obramowania za pomocą zwykłego użycia rgba().

Spróbuj tego:

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

I oto nasz magiczny 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;
}

Sprawdź wersję demo tutaj.