CSS3 倒影
Posted 码匠与HTML5学堂
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 倒影相关的知识，希望对你有一定的参考价值。
CSS3属性在很大程度上替代了“原本通过PS操作设置”才能达到的效果，例如：CSS3蒙版、线性渐变、径向渐变等等。此类CSS3属性的出现，不仅降低了图片请求次数，也提升了开发效率。除了刚刚提到的这些CSS3属性之外，还有一个高逼格的效果 —— 倒影。
本文主要内容
1. CSS3 倒影简介
2. CSS3 倒影语法
3. CSS3 倒影基本用法
1. CSS3 倒影简介
除了前文所提及的，CSS3还新增了Reflections板块，即允许CSS3进行设计倒影，我们完全可以在不使用PS的情况下，通过代码在WEB端实现。但是， CSS3-reflections目前仅获得webkit引擎的支持，我们只能在谷歌与Safari浏览器中使用。但是别灰心，在未来必然会适用于更多的主流浏览器。
2. CSS3 倒影语法
语法：
box-reflect：none | <direction> <offset> ? <mask-box-image>
none：此值为box-reflect默认值，表示无倒影效果；
direction：此值表示box-reflect生成倒影的方向，主要包括以下几个值：
above：表示生成的倒影在对象（原图）的上方；
below：表示生成的倒影在对象（原图）的下方；
left：表示生成的倒影在对象(原图)的左侧；
right：表示生成的倒影在对象(原图)的右侧；
offset：用来设置生成倒影与对象（原图）之间的间距，其取值可以是固定的像素值，也可以是百分比值，如：
使用长度值来设置生成的倒影与原图之间的间距，只要是CSS中的长度单位都可以，此值可以使用负值；
使用百分比来设置生成的倒影与原图之间的间距，此值也可以使用负值
mask-box-image：用来设置倒影的遮罩效果，可以是背景图片，也可以是渐变生成的背景图像。
3. CSS3 倒影基本用法
3.1 图片倒影：
下面的示例定义一个简单的倒影样式，倒影的位置我们可以根据实际情况来设置，此处倒影为图片下方。效果图如下：
CSS:
img {
width:200px;
height: 200px;
-webkit-box-reflect:below;
}
<img />
ps: 如果倒影在图片上方，且没有预留一定的空间，将无法看见。我们可以给父级设置一个pading-top值便可见。
为倒影设置边距：
边距offset取值可以是长度值（px、em或rem），也可以是百分比，还可以是负值
我们在上面的基础上继续改进，为倒影设置距离，向下偏移10像素，效果图如下：
改动的css代码：
-webkit-box-reflect: below 10px;
接下来继续进行改进，设计CSS3渐变倒影，通过渐变遮罩逐渐盖住下面的倒影，制作出渐隐效果。
3.2 渐变效果：
-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
3.3 遮罩层效果：
-webkit-box-reflect: below 0 url(2017.1.23-2.png);
ps: 用于遮罩的图片必须是png格式图片。给生成的倒影添加遮罩效果的时候，如果没有设置显式的间距offset将会让box-reflect失效。也就是说，当box-reflect属性中的mask-box-image属性值出现时，必须显式的设置offset值，如果不需要间距，将其设置为0。
3.4 文字倒影
当然，我们除了可以通过图片设置倒影，也可以为网页上的任何对象设置倒影，下面做个文字本倒影的例子。
代码如下：
p {
font-size: 24px;
color: #39f;
-webkit-box-reflect: below 5px;
}
<p>以匠人之心 –码出多彩程序人生</p>
与图片倒影的初始情况相同，大家可以根据相关参数进行具体设置。
小结：
CSS3倒影并不仅仅局限于图片及文本，网页中的所有对象都可以设置，灵活运用渐变知识可以做出惊人的效果，但CSS3倒影属性目前仅在webkit内核的浏览得到支持。希望本篇文章能给大家带来帮助。
相关文章推荐：
↓↓↓
以上是关于CSS3 倒影的主要内容，如果未能解决你的问题，请参考以下文章