这里是文章内页的小广告~

CSS3中的box-reflect倒影样式

品味人生 • 发布于 2019-02-01 21:37:02

这个家伙很害羞,不想介绍自己!

语法:

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

<direction> = above | below | left | right

<offset> = <length> | <percentage>

<mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

默认值:none

 

取值:

none:无倒影

<direction>

above:指定倒影在对象的上边below:指定倒影在对象的下边left:指定倒影在对象的左边right:指定倒影在对象的右边

<offset>

<length>:用长度值来定义倒影与对象之间的间隔。可以为负值<percentage>:用百分比来定义倒影与对象之间的间隔。可以为负值

<mask-box-image>

none:无遮罩图像

<url>:使用绝对或相对地址指定遮罩图像。

<linear-gradient>:使用线性渐变创建遮罩图像。

<radial-gradient>:使用径向(放射性)渐变创建遮罩图像。

<repeating-linear-gradient>:使用重复的线性渐变创建背遮罩像。

<repeating-radial-gradient>:使用重复的径向(放射性)渐变创建遮罩图像。

 

兼容性:

目前支持的浏览器:Safari 5.0以上  和 Chrome 13.0以上。