马黑黑 发表于 2022-5-28 08:22

CSS：元素反射 box-reflect

本帖最后由 马黑黑 于 2022-5-28 08:25 编辑

box-reflect 属性，与 box-shadow 一样的组词结构，也同样能从字面含义理解属性的作用。reflect有反射之一，box-reflect自然就是元素（盒子）的反射。当前，box-reflect还不能像 box-shadow 那样成为标准属性系列成员，但转正是迟早的事，我们现在要使用它，需要加入前缀便可，比如基于webkit内核的浏览器，我们用 -webkit- 这样的前缀，这些浏览器就会完美识别该属性。

box-reflect 属性能将母元素（盒子）完整反射出去，从效果上看是自身的一个镜像复制。

box-reflect 完整语法需要三个参数：

-webkit-box-reflect: 方向 距离 遮罩;

其中：

参数一（方向）：可选值四个，① above（向上反射）；② right（向右反射）；③ below（向下反射）；④ left：向左反射

参数二（距离）：与母盒子的距离，比如 0 或 10px，可以省略，缺省值是 0

参数三（遮罩）：支持图片和渐变背景遮罩，可以省略此参数，缺省值为无遮罩

应用代码举例：

.reflectImg {
    width: 200px;
    height: 200px;
    -webkit-box-reflect: below 0 linear-gradient(transparent, rgba(255,255,255,.3));
}

<img class="reflectImg" src="图片地址" alt="" />

上述代码中，box-reflect 那句，红色代码是反射方向，紫红色代码是距离，暗红色代码是用的渐变背景做的遮罩。这样设定图片，图片将在下方产生一个倒影。

盒子性质的元素，都可以通过box-reflect来实现反射效果。

每一个盒子只能产生一个方向的镜像反射，当四个方向的镜像反射都设置时，浏览器值呈现最后一个box-reflect。


马黑黑 发表于 2022-5-28 08:32

<style>
.myImg {
    margin: 50px auto 0;
    border-radius: 0 100%;
    -webkit-box-reflect: below 20px linear-gradient(transparent, rgba(255,255,255,.3));
}
</style>

<p>请观察以下效果：</p>

<img class="myImg" src="/uc_server/data/avatar/000/00/71/30_avatar_middle.jpg" alt="">

马黑黑 发表于 2022-5-28 08:33

二楼效果显示，镜像是反向映射的，但忠实原始形状。

马黑黑 发表于 2022-5-28 08:38

{:4_189:}

马黑黑 发表于 2022-5-28 08:43

&lt;p style="text-align: center;"&gt;<div>&nbsp; &nbsp; &lt;img style="-webkit-box-reflect: below;" src="/static/image/smiley/hcbiaoqing2/110.gif" alt="" /&gt;<p></p></div><div>&lt;/p&gt;<br><br></div><div>以上代码，效果是酱紫，看得出来，box-reflect 还能实现动图的效果：</div><div><br></div><div><br></div>
<p style="text-align: center;">
    <img style="-webkit-box-reflect: below;" src="/static/image/smiley/hcbiaoqing2/110.gif" alt="">
</p>

转转 发表于 2022-5-28 08:56

你太厉害了，你会造出一个太阳，在地上哗哗地照射天上的太阳{:4_172:}

马黑黑 发表于 2022-5-28 09:05

转转 发表于 2022-5-28 08:56
你太厉害了，你会造出一个太阳，在地上哗哗地照射天上的太阳

{:5_117:}

醉美水芙蓉 发表于 2022-5-28 09:17

马黑黑 发表于 2022-5-28 10:11

醉美水芙蓉 发表于 2022-5-28 09:17
黑黑老师又有新作品啦！谢谢分享！

这不是作品吧，一个简介

红影 发表于 2022-5-28 11:11

这个元素有趣，直接是照镜子的效果呢。
这个貌似和box-shadow还是有很多不同，box-shadow可以把自身投影出去，而且会丢失细节。
box-reflect看起来能很好地保留原来的细节，好像也不需要拉开很多距离，而且是镜像。很神奇的元素{:4_187:}

红影 发表于 2022-5-28 11:12

黑黑总能带来奇迹，感谢{:4_187:}

马黑黑 发表于 2022-5-28 11:17

红影 发表于 2022-5-28 11:12
黑黑总能带来奇迹，感谢

你这个送花的可以弄个面对面或背对背的{:5_117:}

加林森 发表于 2022-5-28 11:35

这个太厉害了。做图还可以这样玩。{:4_199:}{:4_199:}

加林森 发表于 2022-5-28 11:38


<p style="text-align: center;">
    <img style="-webkit-box-reflect: below;" src="https://www.huachaowang.com/uc_server/data/avatar/000/00/71/87_avatar_middle.jpg" alt="" />
</p>

马黑黑 发表于 2022-5-28 11:41

加林森 发表于 2022-5-28 11:35
这个太厉害了。做图还可以这样玩。

对任何可视元素都可以

加林森 发表于 2022-5-28 12:04

马黑黑 发表于 2022-5-28 11:41
对任何可视元素都可以

嗯嗯，谢谢老黑！{:4_191:}
页: [1]
查看完整版本: CSS：元素反射 box-reflect