一张图让你快速掌握CSS3倒影

例图片

在CSS3之前，想要实现示例图片这样的一个倒影效果一般只能通过处理图片的方式，而CSS3问世之后，想要实现这样的效果变得非常简单，只需一个CSS3属性就可以轻松实现了。

这就是今天所要提到的box-reflect属性。

咱们先看看W3C给出的box-reflect语法：

box-reflect：none | <direction> <offset>? <mask-box-image>? （?代表可缺省，也就是后俩属性可有可无）
<direction>=above | below | left | right （分别代表：上 | 下 | 左 | 右）
<offset>=<length> | <percentage>（分别代表：固定值 | 百分比）
<mask-box-image>=none | <url> | <linear-gradient> | <radial-gradient>| <repeating-linear-gradient> | <repeating-radial-gradient>（分别代表：没有遮罩图片 | 遮罩图片路径 | 线性渐变 | 径向渐变 | 重复线性渐变 | 重复径向渐变）
默认值：none

box-reflect可给两种属性值，一种是none，为默认值，也就是没有任何倒影效果，另一种才是我们今天所要讲的，它可以同时赋予三个属性值，它们依次代表倒影方向、元素与倒影之间的距离以及加在倒影上的遮罩图像，其中后两个属性值可以缺省，但如果<mask-box-image>存在，则<offset>必填。

说了那么多干巴巴的解释，还是联系一下示例应该更好理解些吧。

我们现在来一步步地实现文章开头示例图片的投影效果：

①只给一个属性值below。

<!--HTML代码-->< img class="img" src="imgs/cat.jpg" />

/*CSS代码*/.img{ -webkit-box-reflect: below; box-reflect: below;}

实现效果：

②再加个5px的间距。

/*CSS代码*/.img{ -webkit-box-reflect: below 5px; box-reflect: below 5px;}

实现效果：

③最后加个图片遮罩吧。

/*CSS代码*/.img{ -webkit-box-reflect: below 5px -webkit-linear-gradient(transparent 60%,rgba(0,0,0,.3));box-reflect: below 5px linear-gradient(transparent 60%,rgba(0,0,0,.3));}

这里的图片遮罩没有用图片，而是用了CSS3中的linear-gradient属性值，它就是用于线性渐变，具体用法这里就不提了，可以直接看这里（http://www.w3cplus.com/content/css3-gradient )，写得很详细。

实现效果：

这就是文章开头示例图片的最终效果。

接下来，再说说径向渐变创建图片遮罩和直接使用图片遮罩。

径向渐变的话其实跟线性渐变类似，只需要你掌握CSS3中基本的径向渐变方法，给个简单示例吧：

/*CSS代码*/.img{ -webkit-box-reflect: left 0 -webkit-radial-gradient(#000 30%,transparent); box-reflect: left 0 radial-gradient(#000 30%,transparent);}

实现效果：

效果很棒！好像猫咪真的在照镜子一样~~

那如果直接使用图片遮罩呢？比如说我用这样一张图片作为遮罩：

/*CSS代码*/.img{ -webkit-box-reflect: right 0 url(imgs/mask.png); box-reflect: right 0 url(imgs/mask.png);}

实现效果：

mask.png

可以看出，遮罩图片会完全拉伸填充倒影图片，并且效果是完全透明部分不会显示出来（其实CSS3渐变图片遮罩原理也跟这个是一样的）。

需要注意的是，以上讲的所有效果不仅仅可以用在图片上，用在其他元素上也是完全可以的，比如说文字。

兼容性： box-reflect虽然看起来效果很不错，但是遗憾的是，目前只有webkit内核浏览器兼容，不过移动端基本已经没有任何问题啦~~

内容转自微信公众号：前端微站

、相关知识点

介绍

文档

MDN关于倒影属性介绍：https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect

官方说明：

非标准:该特性是非标准的，不在标准轨道上。不要在面向Web的生产站点上使用它:它并不适用于每个用户。实现之间也可能存在很大的不兼容性，将来行为可能会发生变化

浏览器兼容性：

总结

虽然这是个非标准属性，但是大多数浏览器都支持，火狐除外，追求效果的还是可以使用的。

属性相关

支持三个位置的属性值：
-webkit-box-reflect：属性值1 属性值2 属性值3；

属性值1：倒影的位置：

-webkit-box-reflect: above; /* 上 */
-webkit-box-reflect: below; /* 下 */
-webkit-box-reflect: left; /* 左 */
-webkit-box-reflect: right; /* 右 */

属性值2：倒影的距离：

-webkit-box-reflect: below 10px;  /* 下，距离10像素 */

属性值3：倒影的遮罩层：

-webkit-box-reflect: below 0 linear-gradient(transparent, white);
/* 下，距离0像素，线性遮罩最后白色 */

二、实现步骤

完整代码：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body { margin: 0; }
			#time {
				width: 300px;
				height: 80px;
				line-height: 80px;
				font-size: 48px;
				text-align: center;
				font-weight: bold; /* 下 */
				color: #fff;
				background-color: #2196f3;
				-webkit-box-reflect: below 1px linear-gradient(transparent, #0004);
			}
		</style>
	</head>
	<body>
		<div id="time"></div>
		<script>
			function refreshTime(){
				let time=document.getElementById('time');

				let h=new Date().getHours(); //小时
				let m=new Date().getMinutes(); //分钟
				let s=new Date().getSeconds(); //秒

				time.innerHTML=`${h}:${m}:${s}`
				setTimeout(refreshTime, 1000)
			}

			refreshTime()
		</script>
	</body>
</html>

总结

以上就是今天要讲的内容，本文介绍CSS倒影属性，更多详细内容，自己多写写代码，多练练，可以参考https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect。

如果觉得有用欢迎点赞，关注
有问题私信我！！

击右上方红色按钮关注“web秀”，让你真正秀起来

前言

离2019年春节越来越近了，该努力的都的努力一把了。是学生的，好好努力一把，希望您学业有成；是老板的，好好努力一把，祝您公司早日上市；是单身的，好好努力一把，早日找个好老婆。下面言归正传：

会PS的应该都知道如何制作倒影： 1、crtl+j复制图层 2、选中新图层，垂直180旋转，然后拉到一个图层底部对应 3、对复制图层设置渐变色

今天我们就用CSS3制作图片倒影，原理和PS一样，下面我们一步一步来。

基础结构 - 第一步

<div class="img1 alt=""></div>
<div class="img2 alt=""></div>
...
*{
 padding: 0;
 margin: 0;
}
div{
 display: block;
 width: 500px;
 height: 281px;
 background: url('./600-31080.png');
}

CSS3实现美美哒的图片倒影效果

旋转图片 - 第二步

添加样式，transform 旋转

.img2{
 transform: scaleY(-1);
}

CSS3实现美美哒的图片倒影效果

渐变 - 第三步

设置渐变，不能直接在img2上面添加样式了，必须用另外一个层来盖在上面，所以我们就用伪元素来处理这个效果

.img2:before{
 content: '';
 display: block;
 width: 100%;
 height: 100%;
 transform: scaleY(-1);
 background-image: -webkit-gradient(
 linear, 
 left bottom, 
 left top, 
 color-stop(0.2, rgb(255,255,255)), 
 color-stop(1, rgba(255,255,255,0.3))
 ); 
}

CSS3实现美美哒的图片倒影效果

拓展

倒影和原图增加立体感，我们可以使倒影图倾斜一个角度，css3中，提供transform: skew(30deg)), 30deg是角度。由于倾斜，所以需要向右位移一下margin-left。

.img2{
 transform: scaleY(-1) skew(-30deg);
 margin-left: 81px;
}

CSS3实现美美哒的图片倒影效果

总结

是不是发现，实现上面和PC一致，不过一个是用代码实现的，一个只需要点击操作就OK，原理一样。主要通过transform的scale、skew属性，和背景gradient渐变实现图片倒影渐变效果。

有兴趣的可以研究《通过transform scale制作一个正方体效果》哦，行动后才知道自己的能力，不要惧怕，而迈不开第一步，相信自己可以。

公告

喜欢小编的点击关注，了解更多知识！

源码地址请点击下方“了解更多”

在线咨询

上一篇：波哥教你仿58同城网站实现城市自动切换
下一篇：JavaScript浏览器端数据存储方案之Cooki

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

一张图让你快速掌握CSS3倒影

属性相关

二、实现步骤

总结

前言

基础结构 - 第一步

旋转图片 - 第二步

渐变 - 第三步

拓展

总结

推荐文章

公告

您的项目需求