CSS box-reflect egenskap
- Föregående sida box-decoration-break
- Nästa sida box-shadow
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; }
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; }
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; }
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)); }
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 offset gradient |
Trei-värdes syntax:
|
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- |
- Föregående sida box-decoration-break
- Nästa sida box-shadow