current position:Home>Box reflect of CSS3 attribute

Box reflect of CSS3 attribute

2021-08-27 09:42:51 Flying Netherlands

box-reflect That's the reflection effect The grammar is as follows :

-webkit-box-reflect:none | <direction> <offset>? <mask-box-image>?
box-reflect: none | <direction> <offset>? <mask-box-image>?
 Copy code 

Attribute specification : none: The default value is , Indicates no reflection .

direction: The direction in which the reflection is generated ,above、below、left、right They stand for up, down, left and right .

offset: The distance between the reflection and the object , Values can be numbers or percentages , Can be negative .

mask-box-image: The effect of the reflection mask layer , Values can be :none: Unmasked image url: Use absolute or relative address to specify mask image . linear-gradient: Create a mask image with a linear gradient . radial-gradient: Use radial ( Radioactivity ) Gradient create mask image . repeating-linear-gradient: Create a back mask image using a repeated linear gradient . repeating-radial-gradient: Use repeated radial ( Radioactivity ) Gradient create mask image .

Usage is as follows : -webkit-box-reflect:below 0px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.8));

effect :

1629688136(1).jpg

copyright notice
author[Flying Netherlands],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827094248745y.html

Random recommended