当前位置: 移动技术网 > IT编程>网页制作>Html5 > 倒影box-reflect(可图片可文字)

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

2020年04月02日  | 移动技术网IT编程  | 我要评论
需要写兼容写法: -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相册感到很寻常,而是用倒影标签之后往往可以给人眼前一亮的视觉冲击,多这一个标签就可以使你的网页效果翻倍

 

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网