在CSS中，反射是一种比较常见的效果。今天，我们就来尝试用CSS来完成各种反射效果。话不多说，我们直接进入主题。实现反射的两种方法首先，快速浏览一下在CSS中实现反射的两种方法。使用-webkit-box-reflect一般情况下，-webkit-box-reflect是一种非常方便快捷的反射实现方式。-webkit-box-reflect的语法很简单，最基本的用法是这样的：div{-webkit-box-reflect:below;}其中，below可以是below|以上|左|right代表bottom,top,left,right，也就是有4个方向可以选择。看这样一个例子：div{background-image:url('image.png');-webkit-box-reflect:below2pxlinear-gradient(transparent,rgba(0,0,0,.5));}看效果，虚实变化后，这个更像是反射。简单来说，使用-webkit-box-reflec可以实现：不同方向投影的投影距离虚实相间，可以叠加一层mask来控制透明度。以上3点就是-webkit-box-reflec的特点。同时，也说明它有一定的局限性。同时，今天，从-webkit-box-reflec的名字可以看出，存在一点兼容性问题。所以，如果我们要实现更复杂的反射效果。使用以下方法之一可能会更好。通过多实现一个反向元素来实现这种方法其实更常见。也就是我们可以达到相反的效果。通常它利用元素的伪元素。代码很简单，以文本为例：Reflect
p{position:relative;&::before{内容：属性（内容）；位置：绝对；插图：0；变换：rotatex(180deg)translatey(15px);变换原点：50%100%；}}就是通过元素的伪元素，然后旋转180度，放到正确的位置。效果如下：.image">虽然这段代码有点多，但是由于这是一个整体可控的元素，所以基于它我们可以实现的效果会非常丰富。实现各种反射效果接下来我们将在上述DEMO的基础上丰富我们的反射效果。我们要做的最核心的事情就是通过伪元素的变换来实现不同的效果，得到不同的反射。通过蒙版，控制透明度，控制条纹。我们可以通过mask有效的控制反射的透明度：p::before{mask:linear-gradient(transparent,#000);}效果如下：透明度的控制也可以从左到右：p::before{mask:linear-gradient(90deg,transparent,rgba(255,255,255,0.01)25%,white,rgba(255,255,255,0.01)75%,transparent);}效果是如下：当然mask可以有不同的作用，不仅可以控制透明度，还可以实现横线分离，竖线分离，斜线分离：p::before{mask:repeating-linear-gradient(transparent,transparent3px,white3px,white4px);}这是一条水平线，效果如下：改变遮罩的角度，可以得到不同方向的各种效果：p::before{mask:repeating-linear-gradient(90deg,transparent,transparent3px,white3px,white4px);}是的，我们也可以把上面两种不同的mask效果叠加在一起，那么就是这样：p::before{mask:repeating-linear-gradient(transparent,transparent3px,white3px,white4px),linear-gradient(transparent40%,white90%);}然后就是渐变消失叠加线段分离的效果：如上效果，再叠加在角度控制上，是另一种效果：p::before{mask:repeating-linear-gradient(35deg,transparent,transparent3px,white3px,white4px),linear-gradient(-90deg,transparent,transparent,white);}效果如下：配合transform实现斜体通过叠加transform，我们可以让字体有一个合适的斜率角度，像这样：p::before{mask:linear-gradient(transparent20%,rgba(255,255,255,.7)95%);transform:rotatex(180deg)translatey(15px)skew(135deg)translatex(-10px);}效果如下：当然控制mask有各种纹理：p::before{mask:repeating-linear-gradient（35deg，透明，透明2px，白色2px，白色4px），重复线性渐变（-35deg，透明，透明2px，白色2px，白色4px），线性渐变（透明30％，白色95％）;transform:rotatex(180deg)translatey(15px)skew(135deg)translatex(-10px);}效果如下：如果还使用另一个伪元素，可以丰富反射的方向：p{&::before{mask:linear-gradient(transparent5%,rgba(255,255,255,.9)95%);变换：旋转（180度）平移（11像素）倾斜（125度）平移（-10像素）；背景：#333；颜色：透明；背景剪辑：t分机；z-索引：1；}&::after{transform:rotatex(180deg)translatey(11px)skew(-125deg)translatex(8px);背景：#ddd；颜色：透明；背景剪辑：文本；遮罩：线性渐变（透明5%，rgba(255,255,255,.9)95%）；}}是这样的：先用滤镜模糊一下，再用滤镜继续丰富反射效果比如简单的一层模糊滤镜：p::before{mask:linear-gradient(transparent5%,RGBA(255,255,255,.9)99%);变换：rotatex(180deg)translatey(6px)skew(135deg)translatex(-8px);filter:blur(8px);}效果如下：还是半切，模糊反射：p::before{transform:rotatex(180deg)translatey(15px);过滤器：模糊（4px）；mask:linear-gradient(transparent30%,white90%);}或多个过滤器堆叠在一起：p::before{transform:rotatex(180deg)translatey(15px);filter:blur(9px)brightness(1.5);}效果如下：以上所有效果的Demo可以在这里找到：CodePenDemo--TextReflectEffectDemo换个字体试试，使用background-clip:textNext，我们可以尝试改变不同的字体。其实通过background-clip:text这个特性，可以给文字染上不同的效果。比如我们选择了这样一张图片：使用background-clip:text作用于文字，像这样：p{position:relative;font-family:'新字体',sans-serif;背景：url（花式图片.jpg）；背景剪辑：文本；颜色：透明；&::before{内容：属性（内容）；位置：绝对；插图：0；变换：rotatex(180deg)translatey(24px);变换原点：50%100%；背景：继承；背景剪辑：文本；颜色：透明；}}再次重复上面的效果，我们可以得到更加多样和不同的效果，下面是整体效果展示：完整代码，可以点击这里：CodePenDemo--TextReflectEffectDemo最后，当然反射可以做的很远不止这些效果。有兴趣的读者可以尝试使用更多的CSS属性来制作更有趣的反射效果。好了，本文到此结束，希望本文对你有所帮助：）更多精彩的CSS技术文章汇总在我的Github——iCSS，持续更新中。欢迎点个星订阅收藏。有什么问题或者建议可以多交流。原创文章文笔有限，知识匮乏。如果文章中有任何不准确的地方，请告诉我。
