倒影问题(reflect:below)
这个例子灵感来源于实现一个登录框下方的倒影:
.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);
}
实现效果:

关键点:倒影的取色和位置需要与上面的颜色对应,用透明度控制即可;(添加两到三个红色,因为倒影最淡的颜色部分其实就是红色,添加两个可使之更加自然);
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/10451803.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」