CSS box-reflect egenskap

Definition och användning

box-reflect Egenskapen används för att skapa en reflekterande effekt för element.

box-reflect Värdet för egenskapen kan vara:

  • below(nedan)
  • above(ovan)
  • left(vänster)
  • right(höger)

Observera:box-reflect Egenskapen är en icke-standard egenskap och måste användas -webkit- Prefix.

Exempel

Exempel 1

Lägg till reflektion nedanför bilden:

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

Prova själv

Exempel 2

box-reflect Egenskapen kan tillämpas på alla synliga HTML-element. Exempelvis skapar detta en reflektion nedanför <p>-taggen:

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

Prova själv

Exempel 3

box-reflect Egenskapen kan användas med två-värdes syntax. Exempelvis skapar detta en reflektion nedanför bilden, med ett avstånd på 70px:

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

Prova själv

Exempel 4

box-reflect Egenskapen kan användas med tre-värdes syntax. Exempelvis skapar detta en reflektion nedanför bilden, med ett avstånd på 10px och tappar gradvis ut:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde Beskrivning
none Standardvärde. Visa inte reflektionseffekten.
below Skapa en reflektionseffekt nedanför elementet.
above Skapa en reflektionseffekt ovanför elementet.
left Skapa en reflektionseffekt till vänster om elementet.
right Skapa en reflektionseffekt till höger om elementet.
position offset

Tolvärdes syntax:

  • position Ställ in positionen för reflektionen (below, above, left eller right).
  • offset Ställ in avståndet för reflektionen. Avståndet kan vara i enheter som px, pt, cm etc. Standardvärdet är 0.
position offset gradient

Trei-värdes syntax:

  • position Ställ in positionen för reflektionen (below, above, left eller right).
  • offset Ställ in avståndet för reflektionen. Avståndet kan vara i enheter som px, pt, cm etc. Standardvärdet är 0.
  • gradient Ställ in övergångseffekter för reflektionen, till exempel uttömnings effekt.
initial Sätt denna egenskap till dess standardvärde. Se till: initial.
inherit Följer från föräldrelementet för denna egenskap. Se till: inherit.

Tekniska detaljer

Standardvärde: none
Arv: nej
Animation: inte stödjer. Se till:Animation relaterade egenskaper.
Version: CSS3
JavaScript-syntax: object.style.webkitBoxReflect="below"

Webbläsarstöd

Tal i tabellen representerar den första webbläsarversionen som fullständigt stöder denna egenskap.

Tal med -webkit- prefix indikerar den första versionen som stöder detta prefix.

Chrome Edge Firefox Safari Opera
4.0 -webkit- 79.0 -webkit- inte stödjer 4.0 -webkit- 15.0 -webkit-