倒影问题（reflect:below）

时间：2022-06-07 03:03:57
这个例子灵感来源于实现一个登录框下方的倒影：

.box {
    width: 300px;
    height: 200px;
    border: 1px solid #1f637b;
    -webkit-box-reflect: below 10px -webkit-linear-gradient(rgba(255, 255, 255, 0.0),rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.1), rgba(100, 119, 135, 0.5));
    color: #fff;
    position: absolute;
    top: 100px;
    margin: 100px auto;
    border-radius: 5px;
    border-color: rgba(255,255,255,0.5);
    box-shadow: 1px 1px 14px rgba(255, 255, 255, 0.4), inset -11px 3px 131px rgba(100, 119, 135, 0.8);
}
.login,.reset{
    width: 90px;
    height: 30px;
    border-color: rgba(77, 96, 110, 0.1);
    background: rgba(140, 155, 165, 0.5);
    color: #fff;
    font-size: 17px;
    margin-left: 36px;
    margin-top: 14px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.2), inset 0 20px 30px rgba(26, 39, 47, 0.5);
    -moz-box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.2), inset 0 20px 30px rgba(26, 39, 47, 0.5);
    box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.2), inset 0 20px 30px rgba(26, 39, 47, 0.5);
}
实现效果：
倒影问题（reflect:below）

关键点：倒影的取色和位置需要与上面的颜色对应，用透明度控制即可；（添加两到三个红色，因为倒影最淡的颜色部分其实就是红色，添加两个可使之更加自然）；

相关文章