Use CSS to create reflections

-webkit-mask

This property is quite powerful, so the detailed introduction is beyond the scope of this article, and it is well worth digging into because it can save you a lot of time in practical applications.

-webkit-mask makes it possible to add masks to an element so you can create patterns of any shape. The mask can be a CSS3 gradient or a translucent PNG image. When the alpha value of the mask element is 0, the following element is overwritten, and the following is fully displayed for 1. The associated properties are-webkit-mask-clip,-webkit-mask-position, and-webkit-mask-repeat, and are heavily dependent on the syntax from background.

Example

Picture mask:

. mask {  width:50px;  height:50px;  Background:url ("./logo.svg") repeat;  -webkit-mask:url ("./logo.svg");}

Effect:

Example

Gradient Mask:

. mask {  width:50px;  height:50px;  Background:url ("./logo.svg") repeat;  -webkit-mask:-webkit-gradient (linear, left top, left bottom, from (Rgba (0, 0, 0, 1)), to (RGBA (0, 0, 0, 0)));}

Effect:

Use CSS to create reflections