技术栈

css3元素倒影效果属性:box-reflect

星月前端2025-09-04 10:56

css3元素倒影效果属性:box-reflect

效果:

各游览器的兼容性如下:

这个效果可以用于单个元素,或者div等,很方便,很实用。

css 复制代码
/* 倒影 */
.box-reflect {
  -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #0006);
}
上一篇:字节跳动后端 一面凉经
下一篇:k8s控制器定时把k8s apiserver内存和cpu打得很高
相关推荐
掘金安东尼
3 小时前
纯 CSS 实现弹性文字效果
前端·css
牛奶
3 小时前
Vue 基础理论 & API 使用
前端·vue.js·面试
牛奶
3 小时前
Vue 底层原理 & 新特性
前端·vue.js·面试
anOnion
4 小时前
构建无障碍组件之Radio group pattern
前端·html·交互设计
pe7er
4 小时前
状态提升:前端开发中的状态管理的设计思想
前端·vue.js·react.js
SoaringHeart
5 小时前
Flutter调试组件:打印任意组件尺寸位置信息 NRenderBox
前端·flutter
晚风予星
5 小时前
Ant Design Token Lens 迎来了全面升级!支持在 .tsx 或 .ts 文件中直接使用 Design Token
前端·react.js·visual studio code
sunny_
6 小时前
⚡️ vite-plugin-oxc:从 Babel 到 Oxc,我为 Vite 写了一个高性能编译插件
前端·webpack·架构
GIS之路
6 小时前
ArcPy 开发环境搭建
前端
林小帅
7 小时前
【笔记】OpenClaw 架构浅析
前端·agent
热门推荐
01GitHub 镜像站点02【OpenClaw 本地实战 Ep.3】突破瓶颈:强制修改 openclaw.json 解锁 32k 上下文记忆03OpenClaw 使用和管理 MCP 完全指南04Clawdbot部署教程:解决‘gateway token missing’授权问题的完整步骤05OpenClaw + 飞书(Feishu)环境搭建指南06Claude Code + GLM4.7 避坑指南:解决 Unable to connect to Anthropic services07Window 10部署openclaw报错node.exe : npm error code 12808AI 规范驱动开发“三剑客”深度对比:Spec-Kit、Kiro 与 OpenSpec 实战指南09AI Agent 平台横评:ZeroClaw vs OpenClaw vs Nanobot10OpenClaw优化飞书API 额度已耗尽问题