CSS属性box-reflect

Definicja i użycie

box-reflect Atrybut jest używany do tworzenia efektu odbicia elementu.

box-reflect Wartość atrybutu może być:

  • below(na dole)
  • above(po górze)
  • left(po lewej stronie)
  • right(po prawej stronie)

Uwaga:box-reflect Atrybut jest atrybutem niestandardowym, musi być używany -webkit- Przedrostek.

Przykład

Przykład 1

Dodaj efekt refleksji pod obrazem:

img {
  -webkit-box-reflect: below;
}

Spróbuj sam

Przykład 2

box-reflect Atrybut może być zastosowany do każdego widocznego elementu HTML. Przykład poniżej tworzy efekt refleksji pod etykietą <p>:

p {
  -webkit-box-reflect: below;
}

Spróbuj sam

Przykład 3

box-reflect Atrybut może być użyty również w dwójargumentowym语法. Przykład poniżej tworzy efekt refleksji pod obrazem i ustawia odległość na 70px:

img {
  -webkit-box-reflect: below 70px;
}

Spróbuj sam

Przykład 4

box-reflect Atrybut może być użyty również w trójargumentowym语法. Przykład poniżej tworzy efekt refleksji pod obrazem, ustawia odległość na 10px i stopniowo rozmywa:

img {
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

Spróbuj sam

CSS syntax

box-reflect: none|below|above|left|right|position offset gradient|initial|inherit;

Wartość atrybutu

Wartość Opis
none Domyślna wartość. Efekt refleksji nie jest wyświetlany.
below Tworzenie efektu refleksji pod elementem.
above Tworzenie efektu refleksji nad elementem.
left Tworzenie efektu refleksji po lewej stronie elementu.
right Tworzenie efektu refleksji po prawej stronie elementu.
position offset

Dwójargumentowy语法:

  • position Ustawienie pozycji refleksji (below, above, left lub right).
  • offset Ustawienie odległości refleksji. Odległość może być wyrażona w jednostkach px, pt, cm itp. Domyślna wartość to 0.
position offset gradient

Trójargumentowy语法:

  • position Ustawienie pozycji refleksji (below, above, left lub right).
  • offset Ustawienie odległości refleksji. Odległość może być wyrażona w jednostkach px, pt, cm itp. Domyślna wartość to 0.
  • gradient Ustawienie efektu przejścia refleksji, na przykład efekt rozmycia.
initial Ustawienie tej właściwości na jej wartość domyślną. Zobacz: initial.
inherit Inherencja tej właściwości od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: none
Inherencyjność: Nie
Tworzenie animacji: Nie wspierane. Zobacz:Atrybuty animacji.
Wersja: CSS3
JavaScript syntax: object.style.webkitBoxReflect="below"

Wspieranie przeglądarek

Liczby w tabeli oznaczają pierwszą wersję przeglądarki w pełni wspierającą tę właściwość.

Liczby z przedrostkiem -webkit- oznaczają pierwszą wersję przeglądarki wspierającą ten przedrostek.

Chrome Edge Firefox Safari Opera
4.0 -webkit- 79.0 -webkit- Nie wspierane 4.0 -webkit- 15.0 -webkit-