CSS box-reflect eigenschap

定义和用法

box-reflect 属性用于创建元素的反射效果。

box-reflect 属性的值可以是：

  • below（下方）
  • above（上方）
  • left（左侧）
  • right（右侧）

注意：box-reflect 属性是非标准属性，必须使用 -webkit- 前缀。

实例

Voorbeeld 1

Voeg een reflectie-effect toe onder het afbeelding:

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

Probeer het zelf uit

Voorbeeld 2

box-reflect De eigenschap kan worden toegepast op elk zichtbaar HTML-element. In het volgende voorbeeld wordt een reflectie-effect gemaakt onder het <p>-tag:

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

Probeer het zelf uit

Voorbeeld 3

box-reflect De eigenschap kan ook worden gebruikt met tweewaardige syntaxis. In het volgende voorbeeld wordt een reflectie-effect gemaakt onder het afbeelding, met een afstand van 70px:

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

Probeer het zelf uit

Voorbeeld 4

box-reflect De eigenschap kan ook worden gebruikt met driewaardige syntaxis. In het volgende voorbeeld wordt een reflectie-effect gemaakt onder het afbeelding, met een afstand van 10px en een geleidelijke uitdijend effect:

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

Probeer het zelf uit

CSS syntaxis

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

Eigenschapswaarde

Waarde Beschrijving
none Standaardwaarde. Geen reflectie-effect weergegeven.
below Maak een reflectie-effect aan aan de onderkant van het element.
above Maak een reflectie-effect aan aan de bovenkant van het element.
left Maak een reflectie-effect aan aan de linkerkant van het element.
right Maak een reflectie-effect aan aan de rechterkant van het element.
position offset

Tweewaardige syntaxis:

  • position Stel de positie van de reflectie in (below, above, left of right).
  • offset Stel de afstand van de reflectie in. De afstand kan worden aangegeven in eenheden zoals px, pt, cm. De standaardwaarde is 0.
position offset gradient

Driewaardige syntaxis:

  • position Stel de positie van de reflectie in (below, above, left of right).
  • offset Stel de afstand van de reflectie in. De afstand kan worden aangegeven in eenheden zoals px, pt, cm. De standaardwaarde is 0.
  • gradient Stel de overgangseffecten van de reflectie in, bijvoorbeeld een uitdijend effect.
initial Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap wordt van de ouderlijke elementen geërfd. Raadpleeg inherit.

Technische details

Standaardwaarde: none
Inheritantie: Nee
Animatieproductie: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript syntaxis: object.style.webkitBoxReflect="below"

Browserondersteuning

De cijfers in de tabel geven de eerste versie van de browser aan die deze eigenschap volledig ondersteunt.

Getallen met -webkit- voorvoegsel geven de eerste versie aan die deze voorvoegsel ondersteunt.

Chrome Edge Firefox Safari Opera
4.0 -webkit- 79.0 -webkit- Niet ondersteund 4.0 -webkit- 15.0 -webkit-