Czy możesz ustawić krycie granic w CSS?


409

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?

Odpowiedzi:


626

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.


tak, a potem wróciliśmy do problemu, który miał po raz pierwszy ^^ „Myślałem o użyciu rgba jako koloru obramowania, ale działa bardzo słabo we współczesnych przeglądarkach”. podczas gdy moje rozwiązania działają prawie we wszystkich przeglądarkach
Breezer

23
W rzeczywistości rgba działa doskonale w nowoczesnych przeglądarkach (chyba że uważasz IE6-8 za „nowoczesne”).
kingjeffrey

4
dobrze oni przypuszczają być: P a gdy masz 50% + ich użyciem należy dbać o to, że działa dla IE aswell imo przynajmniej dla IE7 +
Breezer

42
I dlatego powraca „fałszywa nieprzezroczystość”. Moje życie jako projektanta stron internetowych stało się znacznie łatwiejsze, gdy zaakceptowałem, że nie każda przeglądarka musi wyświetlać się identycznie. Jeśli wspierają border-radius, wtedy zaokrąglają rogi. Jeśli nie, to nie. Treść jest nadal dostępna, nadal wygląda dobrze, po prostu wygląda lepiej, jeśli używają sprawnej przeglądarki. Nigdy nie miałem jednego klienta, który narzekałby na to w ciągu ostatnich 1,5 roku działania w ten sposób na każdym projekcie.
kingjeffrey

23
Jeśli jednak próbujesz sprawić, by zawartość za obramowaniem świeciła (a NIE kolor samego tła graniczącego elementu), musisz również ustawić background-clip:padding-box;.
SooDesuNe

134

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

wprowadź opis zdjęcia tutaj


To zawsze zadziała. Dzięki za fragment :) Dla wszystkich, którzy chcą mieć tylko granicę z jedną lub kilkoma witrynami, musisz zmienić dwa pierwsze parametry, takie jak box-shadow: -1px -1px 0px 0px rgba (0,0,0,0,1 ), aby osiągnąć np. awans
Thomas Richter

Tego należy używać ostrożnie! box-shadownie ma rozmiaru i może zepsuć układ, powodując nierówne marginesy! jsfiddle.net/bj81hew7/2
William

14

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.


4
Problem z ramką można wyleczyć background-clip: padding-box;(i dopóki nie będzie obsługiwany, możesz użyć rozszerzeń dostawców -webkit i -moz).
kingjeffrey

Dodałem tę odpowiedź do pytania, z którym się łączysz.
kingjeffrey

6

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.


11
Źle, jest to całkowicie akceptowalne przez standardy W3C i jest błędem w walidatorze. Zobacz tę odpowiedź . Dobrze jest użyć walidatora, tak, ale nie ufaj mu do wszystkiego.
BoltClock

5

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


Tak, właściwie to właśnie skończyłem, po prostu jest do bani fuding z pozycjonowaniem elementów.
mcbeav

dodał przykład, aby lepiej zrozumieć, o czym myślałem :)
Breezer

to może być zrobione - ale nie z szerokim wsparciem cross-browser. Są jednak duże szanse, że każda przeglądarka obsługująca krycie css dla koloru tła będzie również obsługiwać rgba(...)kolory obramowania. możesz to wypróbować tutaj .
Lee

@Lee, IE obsługuje krycie „filtrujące”, ale nie obsługuje żadnej formy rgba (do IE9).
kingjeffrey

2

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.


0

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

0

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().


-1

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.