css实现毛玻璃效果

发表于2024-07-19|更新于2026-02-24

|浏览量:

醉过才知酒浓，爱过才知情重。你不能做我的诗，正如我不能做你的梦。——胡适

从这里学过来的

Backdrop Filter Effect With CSS | CSS-Tricks

核心代码如下：

1
2
3

.container {
  backdrop-filter: blur(10px);
}

效果

进阶学习backdrop：

Backdrop-filter | CSS-Tricks

前端

相关推荐

2025-11-07

apache-shenyu对接mcp-server-swagger-import

友谊是两颗心真诚相待，而不是一颗心对另一颗心的敲打。——鲁迅《鲁迅杂文选》本次 PR（https://github.com/apache/shenyu-dashboard/pull/556）主要为 ShenYu Dashboard 的 MCP Server 管理模块引入了 Swagger 文件导入的前端支持。改动点如下：主要涉及文件及改动说明 src/locales/en-US.json、src/locales/zh-CN.json 改动：新增多条与 Swagger 导入相关的中英文国际化文案，如“Swagger Import”、“Swagger URL”、“项目名称”等。目的：确保新增页面和弹框的所有 UI 字段均能国际化显示。 src/models/mcpServer.js 改动：引入并注册了 mcpSwaggerImport 的异步 effect。新增了 swaggerImport generator 方法，通过 redux-saga 管理，与后端交互处理导入流程，反馈成功/失败提示，并在必要时回调刷新页面数据。目的：规范导入业...

2020-08-19

js使用for in取动态key参数

It’s a nice day for coding,isn’t it?Ha ha! 今天遇到一种服务端响应的参数，key是动态的就像这样我们一般静态key取值就是直接 1data.data.id.username 但这种id是动态的我们就只能用for in的方式取值了 12345678var data = { "msg": "查询成功！", "code": 200, "data": { "2f793b1baf4b441c99a12d22af6678aa": { "username": "ruben2", "password": null, "userInfo": null, "genderEnum": null }, "59fa61fe88b64df58568a7046f17ab38": { &qu...

2020-12-25

live2d看板娘之自定义网站篇

失去信用而赚的钱应结算在损失里。——罗马通过这篇文档配置首先我们下载项目：项目地址然后复制到我们项目中创建页面并放入代码 12345678910111213141516171819202122232425262728293031323334353637<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <link href='Pio/static/pio.css' rel='stylesheet' type='text/css'/></head><body><div class="pio-container left"> <d...

2025-09-24

Chrome DevTools 快速定位请求调用栈并调试前端问题

观古今于须臾,抚四海于一瞬。一一陆机《文赋》教你用 Chrome DevTools 快速定位请求调用栈并调试前端问题在前端开发和接口联调中，我们经常遇到这样的场景：某个 HTTP 请求发出后，返回异常，或者你想知道是谁在哪一步发起了这个请求？搞清楚「请求的调用来源」，是定位和解决问题的第一步。今天就来详细聊聊，如何用 Chrome DevTools 追踪请求的 JS 调用栈，并配合断点调试，精准掌控前端网络请求的“源头”。一、为什么要看请求的调用栈？定位发起请求的代码片段：前端框架、工具库封装很多，找不到是谁发的请求很常见。分析异常/冗余请求：有时页面多发、重复发请求，光看 Network 面板无法溯源。 Debug 异步流程：配合断点跳转，可以还原异步流转过程，查明数据流动和时序问题。二、如何用 Chrome DevTools 查看请求的 JS 调用栈？1. 打开 Network 面板，找到目标请求按 F12 或右键→检查，打开 Chrome DevTools。切换到【Network】标签页，刷新页面或触发操作，找到你关注的请求（可用 fil...

2022-08-20

micro-app

浅水是喧哗的，深水是沉默的。——雪莱分享一个微前端框架micro-app 官方文档：https://micro-zoe.github.io/micro-app/ 仓库地址：https://github.com/micro-zoe/micro-app 在线体验地址：https://zeroing.jd.com/micro-app/demo/react16

2023-01-03

buttons

善人同处，则日闻嘉讯；恶人同游，则日生邪情。——范晔分享一个按钮样式项目： https://github.com/alexwolfe/Buttons 对应的网站： https://unicorn-ui.com/buttons/builder/# 可以自定义你的按钮样式、颜色、点击效果包括3d等等

阿超

我的名字叫阿超年龄25岁家在北京市职业是软件开发每天最晚也会在八点前回家不抽烟酒浅尝辄止晚上十二点上床保证睡足八个小时睡前写一篇博客再做二十分钟俯卧撑暖身然后再睡觉基本能熟睡到天亮像婴儿一样不留下任何疲劳和压力就这样迎来第二天的早晨健康检查结果也显示我很正常我想说明我是一个不论何时都追求内心平稳的人不拘泥于胜负不纠结于烦恼不树立使我夜不能寐的敌人这就是我在这社会的生活态度

数据加载中