CSS3之box-reflect制作倒影

最新推荐文章于 2025-10-29 10:53:21 发布

原创最新推荐文章于 2025-10-29 10:53:21 发布 · 332 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3 #css

Css3 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用CSS的box-reflect属性实现元素的倒影效果，并通过遮罩图像增强视觉表现。涵盖倒影位置设定、遮罩图像类型及应用实例。

box-reflect

box-reflect：none | ? ?

参数：<direction>

参数 above | below | left | right

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

参数：

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

参数：

none | <url>| <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
none：无遮罩图像
<url> : 使用绝对或相对地址指定遮罩图像。
<linear-gradient> : 使用线性渐变创建遮罩图像
<radial-gradient> : 使用径向(放射性)渐变创建遮罩图像
<repeating-linear-gradient>：使用重复的线性渐变创建背遮罩像
<repeating-radial-gradient>：使用重复的径向(放射性)渐变创建遮罩图像

下面就开始简单的玩耍一下吧

准备两张图片吧

简单的demo

倒影的位置一定要有空间可看到

-webkit-box-reflect: left;

效果：

-webkit-box-reflect: right;

效果：

-webkit-box-reflect: above;

-webkit-box-reflect: below -2px;// -2px是为了去掉连接处的缝隙

如何加遮罩效果呢

-webkit-box-reflect: right 0px -webkit-linear-gradient(left,transparent,rgba(0,0,0,0.6));

-webkit-box-reflect: left -1px -webkit-linear-gradient(left,rgba(12,93,163,0.8),rgba(12,93,163,0.1));

注意：假设定义了<mask-box-image>，<offset>必须指定，否则可以省略

添加字的倒影

-webkit-box-reflect: below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 50%,rgba(250,250,250,0.1));

兼容性

参考资料：
【原文Blog】
【box-reflect】
【W3Cplus制作倒影】