资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

css3倒影效果的实现方法

这篇文章主要介绍css3倒影效果的实现方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

成都创新互联自2013年创立以来,先为阆中等服务建站,阆中等地企业,进行企业商务咨询服务。为阆中企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

css3倒影效果的实现方法:可以利用box-reflect属性来实现倒影效果,如【-webkit-box-reflect:below 10px】。box-reflect属性用来设置或检索对象倒影,该属性包含方向、偏移量、遮罩图像三个值。

box-reflect属性设置或检索对象倒影。

box-reflect属性包括3个值。

1、direction 定义方向,取值包括 above 、 below 、 left 、 right。

above:

指定倒影在对象的上边

below:

指定倒影在对象的下边

left:

指定倒影在对象的左边

right:

指定倒影在对象的右边

2、offset定义反射偏移的距离,取值包括数值或百分比,其中百分比根据对象的尺寸进行确定。默认为0。用长度值来定义倒影与对象之间的间隔。可以为负值。用百分比来定义倒影与对象之间的间隔。可以为负值。

3、mask-box-image定义遮罩图像,该图像将覆盖投影区域。如果省略该参数值,则默认为无遮罩图像。

取值:

none:无遮罩图像:

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

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

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

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

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

举例:





无标题文档




效果:

css3倒影效果的实现方法

以上是css3倒影效果的实现方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


网页名称:css3倒影效果的实现方法
当前网址:http://www.cdkjz.cn/article/pcieic.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220