今天看到了一个倒影效果，对于我来说CSS的倒影属性是不太熟悉，所以今天写个光环与倒影的效果来熟悉一下这个属性。

光环与倒影

结构

这个效果的结构就很简单了，只需要一个div标签就好了，如下：

<div class="light">
</div>

样式

首先，我们需要完成光环的样式编写，如下：

.light {
    --size: 15rem;
    --color: cyan;
    --borderColor: #fff;
    width: var(--size);
    height: var(--size);
    border: calc(var(--size) * 0.05) solid var(--borderColor);
    border-radius: 50%;
    box-shadow: 0 0 calc(var(--size) * 0.1) var(--color), 0 0 calc(var(--size) * 0.1) var(--color) inset;
}

其实，光环的定义很好理解，一个白色的边框+一个内外阴影。

其次，我们需要给光环定义倒影，如下：

.light {
    -webkit-box-reflect: below calc(var(--size) * 0.1) linear-gradient(transparent , transparent,rgba(0,0,0,.2));
}

box-reflect有三个值：direction定义方向、offset定义反射偏移的距离、mask-box-image定义遮罩图像，取值范围如下：

1. 倒影方向
   • above（倒影在上）
   • below（倒影在下）
   • left（倒影在左）
   • right（倒影在右）
2. 倒影偏移量
   • length（偏移值可为长度）
   • percentage（偏移值可为百分比）
3. 遮罩图像
   • none（无遮罩图像）
   • url（使用绝对或相对地址指定遮罩图像）
   • linear-gradient（使用线性渐变创建遮罩图像）
   • radial-gradient（使用径向渐变创建遮罩图像）
   • repeating-linear-gradient（使用重复的线性渐变创建背遮罩像）
   • repeating-radial-gradient（使用重复的径向渐变创建遮罩图像）

最后，我们在给光环一个变色的动画，如下：

.light {
    animation: _animate 4s linear infinite;
}

@keyframes _animate {
    100% {
        filter: hue-rotate(360deg);
        -webkit-box-reflect: below calc(var(--size) * 0.1) linear-gradient(transparent , transparent,rgba(0,0,0,.2));
    }
}

在这里我们可以看到：在动画中，我们又添加了一次倒影效果，这是因为如果不添加，在使用这个动画的时候倒影效果会消失，如果小伙伴知道是什么原因造成的，还请留言指教，谢谢。

效果

详情查看效果详情：

总结

倒影效果结合某些场景会形成很酷的效果，这就需要小伙伴根据特别场景来使用了。