CSS box-reflect egenskab

Definition og brug

box-reflect Egenskaben bruges til at skabe et refleksionseffekt på elementet.

box-reflect Egenskabens værdi kan være:

  • below(nede)
  • above(oppe)
  • left(til venstre)
  • right(til højre)

Bemærk:box-reflect egenskaben er en ikke-standard egenskab, som skal bruges -webkit- præfiks.

eksempel

Eksempel 1

Tilføj refleksionseffekt under billedet:

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

Prøv det selv

Eksempel 2

box-reflect Egenskaben kan anvendes på ethvert synligt HTML-element. Eksemplet nedenfor opretter en refleksionseffekt under <p>-tagget:

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

Prøv det selv

Eksempel 3

box-reflect Egenskaben kan bruges med dobbelt værdisprog. Eksemplet nedenfor opretter en refleksionseffekt under billedet og indstiller 70px afstand:

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

Prøv det selv

Eksempel 4

box-reflect Egenskaben kan også bruges med tredobbelt værdisprog. Eksemplet nedenfor opretter en refleksionseffekt under billedet, indstiller 10px afstand og falder gradvist ud:

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

Prøv det selv

CSS syntaks

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

Egenskabsværdi

Værdi Beskrivelse
none Standardværdi. Viser ikke refleksionseffekt.
below Opret refleksionseffekt på elementets nedre side.
above Opret refleksionseffekt på elementets øvre side.
left Opret refleksionseffekt på elementets venstre side.
right Opret refleksionseffekt på elementets højre side.
position offset

Dobbelt værdisprog:

  • position Indstil positionen for refleksionen (below, above, left eller right).
  • offset Indstil afstanden for refleksionen. Afstanden kan bruge enheder som px, pt, cm osv. Standardværdien er 0.
position offset gradient

Tredobbelt værdisprog:

  • position Indstil positionen for refleksionen (below, above, left eller right).
  • offset Indstil afstanden for refleksionen. Afstanden kan bruge enheder som px, pt, cm osv. Standardværdien er 0.
  • gradient Indstil overgangseffekten for refleksionen, f.eks. fade-out effekt.
initial Sæt denne egenskab til dens standardværdi. Se: initial.
inherit Arv denne egenskab fra forældrelementet. Se: inherit.

Tekniske detaljer

Standardværdi: none
Arv: Nej
Animation fremstilling: Ikke understøttet. Se:Animation relaterede egenskaber.
Version: CSS3
JavaScript syntaks: object.style.webkitBoxReflect="below"

Browserunderstøttelse

Tal i tabellen indikerer den første version af browseren, der fuldt ud understøtter egenskaben.

Tall med -webkit- præfiks indikerer den første version, der understøtter præfikset.

Chrome Edge Firefox Safari Opera
4.0 -webkit- 79.0 -webkit- Ikke understøttet 4.0 -webkit- 15.0 -webkit-