Агуулга
In this chapter you will learn how to reflect an image.
SS Image Reflections #
The box-reflect property is used to create an image reflection.
The value of the box-reflect property can be: below, above, left , or right.
#
Browser Support #
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- specify the first version that worked with a prefix.
| Property | Chrome | Internet explorer | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| box-reflect | 4.0 -webkit- | 79.0 -webkit- | Not supported | 4.0 -webkit- | 15.0 -webkit- |
Example #
Here we want the reflection below the image:
img {
-webkit-box-reflect: below;
} Example #
Here we want the reflection to the right of the image:
img {
-webkit-box-reflect: right;
} img {
-webkit-box-reflect: below 20px;
} img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
} 
