Mask reflection gradient, reflection gradient
1. Background radial gradient:
Background:-webkit-radial-gradient (30% 30%, # fff 0%, #000 100% );
2. linear gradient of background:
Background:-webkit-linear-gradient (top, #000 0%, # ccc 30%, # ddd 35%, #000 100%); 3. text gradient: background:-webkit-linear-gradient (left, # f00, # ff0 25%, #0f0 40%, # 0ff 55%, # 00f 70%, # f00 ); -webkit-background-clip: text;/* only displays the background in the text. Only the webkit kernel supports the cut mode of text */color: transparent;/* makes the text transparent */4. mask: Theoretical Knowledge:-webkit-mask-image: url | gradient/* the image or gradient can be used as the mask Layer */-webkit-mask-repeat: repeat | repeat-x | repeat-y | no-repeat-webkit-mask-pos Ition: x y; img {-webkit-mask-image: url ("image 1.png");-webkit-mask-repeat: no-repeat;} image mask: img {-webkit-mask-image:-webkit-radial-gradient (50% 50%, rgba (,), rgba )); //-webkit-mask-position: 70%; //-webkit-mask-repeat: no-repeat; //} Add a gradient to the Image Mask: (the function is to add a color gradient to the image.) 5. reflection :? Syntax :? -Webkit-box-reflect: none | <direction> <offset>? <Mask-box-image>? Direction: above/below/left/right: offset: used to set the spacing between the generated reflection and the object (source image). The value can be a fixed pixel value, it can also be the percentage value mask-box-image: used to set the shadow mask effect. It can be a background image or a gradient-generated background image that uses the shadow mask image directly: div img {width: 200px;-webkit-box-reflect: right 5px url(2.png);} use the reflected gradient directly: img {-webkit-box-reflect: below 5px-webkit-radial-gradient (center, rgba (255,255,255, 0.6) 20%, rgba (255,255,255, 0.2) 50%, rgba (255,255,255, 0) 60% );}
