倒影box-reflect(可图片可文字)

Posted 2021-03-02 dubutianxia

需要写兼容写法：

-webkit-box-reflect：below 3px -webkit-(repeating)linear/redial-gradient(...)；

1.先写direction定义方向：

above：倒映在其对象的上边

below：倒映在其对象的下边

left：左边

right：右边

2.offset定义对象与倒影的距离，默认为0，取值包括px和百分比，百分比是根据对象的大小进行确定。px和百分比都可为负值。

<offset>

• <length>：

  用长度值来定义倒影与对象之间的间隔。可以为负值

• <percentage>：

  用百分比来定义倒影与对象之间的间隔。可以为负值

3.mask-box-images定义

<mask-box-image>

• none：

  无遮罩图像

• <url>：

  使用绝对或相对地址指定遮罩图像。

• <linear-gradient>：

  使用线性渐变创建遮罩图像。

• <radial-gradient>：

  使用径向(放射性)渐变创建遮罩图像。

• <repeating-linear-gradient>：

  使用重复的线性渐变创建背遮罩像。

• <repeating-radial-gradient>：

  使用重复的径向(放射性)渐变创建遮罩图像。