欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-15 22:45:57
需要写兼容写法: -webkit-box-reflect:below 3px -webkit-(repeating)linear/redial-gradient(...); 1.先写direction定义方向: above:倒映在其对象的上边 below:倒映在其对象的下边 left:左边 righ ......

需要写兼容写法:

-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>

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

  众所周知,玩过前端的人一定对3d相册感到很寻常,而是用倒影标签之后往往可以给人眼前一亮的视觉冲击,多这一个标签就可以使你的网页效果翻倍