今天的文章很有意思。一行简单的代码就可以大大提高CSS动态效果的水平。正文从这里开始~在很久以前的一篇文章中，讲到了属性-webkit-box-reflect--从反射开始，讲CSS继承[1]`-webkit-box-reflect`[2]是一个非常有趣的属性，它使CSS能够像一面镜子一样工作，反映我们的元素最初绘制的内容。上次写的时候，它的兼容性还是非常非常惨淡的，但是今天，虽然还是一个Non-standardgrammar，但是兼容性已经大大提高了，我们可以用它来实现很多有趣的效果。截至2021-02-19，其兼容性已达到91.02%。看一下CANIUSE-webkit-box-reflect[3]:-webkit-box-reflect基本用法-webkit-box-reflect的语法很简单，最基本的用法是这样的：div{-webkit-box-reflect:below;}其中，below可以是below|以上|左|right表示bottom,top,left,right，即有4个方向可以选择。假设我们有如下图片：
div{background-image:url('https://images.pokemontcg.io/xy2/12_hires.png');}加上-webkit-box-reflect：对，也就是右侧的倒影：div{background-image:url('https://images.pokemontcg.io/xy2/12_hires.png');-webkit-box-reflect:right;}效果如下，在元素右侧生成一个镜像元素：设置方向后面的反射距离，也可以接一个具体的值来表示反射与原元素的距离。div{background-image:url('https://images.pokemontcg.io/xy2/12_hires.png');-webkit-box-reflect:right10px;}添加10px后，反射与原元素的距离willbe10px:设置倒影的虚实还有一个很重要的作用，就是在orientation之后，还可以设置一个渐变值。利用这个渐变值，可以实现倒影的虚化效果，这一点很重要。div{background-image:url('https://images.pokemontcg.io/xy2/12_hires.png');-webkit-box-reflect:below2pxlinear-gradient(透明,r??gba(0,0,0,.5)));}看效果，虚实转换后，更像倒影了。其实这里的渐变就是给倒影的图片加上一个MASK属性，MASK属性的透明部分会让图片变透明。对于纯色部分，保留原始图像。关于CSSMASK属性，如果你还有疑问，建议你看看这篇文章：WonderfulCSSMASK[4]CodePenDemo---webkit-box-reflectDemo[5]Using-webkit-box-reflect实现一些有趣的掌握了基本语法后，我们就可以用它来实现一些有趣的动画效果了，下面简单罗列一下。我发现这个属性特别适合用在一些深色风格的页面中。可以让很多动态效果看起来高大上很多。（个人审美）在按钮中使用-webkit-box-reflect加上一些动态边框动画按钮可以营造出非常科幻的效果：有兴趣的可以自己戳源码了解一下：CodePendemo-webkit-box-reflectNeonButtonHoverEffect[6]在文中使用了-webkit-box-reflect。在暗黑系列的标题文字中，使用-webkit-box-reflect，瞬间高大上。CodePendemo-Font&-webkit-box-reflect[7]在3D中使用-webkit-box-reflect呵呵，接下来，我们甚至可以在3D效果中使用-webkit-box-reflect，完全不同的观感体验。给3D照片墙加个倒影效果吧：CodePendemo-3DView&-webkit-box-reflect[8]使用-webkit-box-reflect制作艺术图案有趣的CSS艺术，又来了。在袁川先生的这篇文章--ChineseWindowLatticeAndCSS[9]中，介绍了使用-webkit-box-reflect生成剪纸艺术的思路。由于-webkit-box-reflect可以产生反射，我们用它来不断嵌套娃娃，层层叠叠，所以我们只需要生成一个基本元素，我们就可以利用反射来产生各种效果。假设，我们有以下结构：