前端技术文章
-
- CSSfixed定位实现元素随滚动固定
- fixed元素相对于视口定位且脱离文档流，滚动时保持位置不变；需设置top/right/bottom/left偏移值才可见，但受transform/perspective/filter等属性影响而退化为相对父容器定位，并在移动端存在软键盘、滚动闪烁等兼容性问题。
- 文章 · 前端 | 2个月前 | 440浏览 收藏
-
- 优雅设置CSS列表间距技巧
- :not(:first-child)更可靠，因其只对非首子元素生效，避免首项溢出、适配任意容器、不依赖JS、兼容SSR，且不受父容器display类型限制。
- 文章 · 前端 | 2个月前 | 440浏览 收藏
-
- CSS变量控制图片滤镜强度的方法很简单，可以通过定义 CSS 自定义属性（变量）来动态调整 filter 属性的值。下面是一个完整的示例，展示如何通过变量控制图片滤镜的强度。✅ 实现目标使用 CSS 变量（--filter-strength）控制图片的滤镜强度（如 brightness、contrast 等）。通过 JavaScript 或直接在 CSS 中修改变量值，实现动态调整。📌 示例代码1
- 直接写filter:blur(var(--blur))失效是因为--blur必须定义为带单位的值（如4px），若为无单位数字或带引号字符串则静默失效；所有滤镜需在同一filter声明中空格分隔，变量更新须用dataset+requestAnimationFrame批量设置，避免覆盖与竞态。
- 文章 · 前端 | 2个月前 | 440浏览 收藏
-
- CSS动画持续时间怎么调？animation-duration使用教程
- CSS动画需同时满足animation-name、匹配的@keyframes及animation-duration非0才触发；单位选s或ms依场景而定；duration影响节奏感知，需协同timing-function调整；JS动态修改需确保动画已挂载。
- 文章 · 前端 | 2个月前 | 440浏览 收藏
-
- HTML遮罩弹层优化技巧分享
- 遮罩层z-index不必绝对高于弹层，但需确保遮罩盖住背景、弹层盖住遮罩；推荐遮罩z-index:1000、弹层z-index:1001+；注意父容器z-index和position影响、移动端fixed定位更可靠、rgba()背景优于opacity。
- 文章 · 前端 | 2个月前 | 440浏览 收藏
-
- HTML pre标签保留格式方法解析
- pre标签换行空格不显示的根本原因是HTML默认压缩空白符，且动态注入或转义会破坏原始格式；需用textContent注入、显式设置white-space、避免模板转义，并统一缩进方式。
- 文章 · 前端 | 2个月前 | 440浏览 收藏
-
- 输入框占位提示设置方法全解析
- placeholder属性需直接写在<input>或<textarea>标签内，如<inputplaceholder="请输入邮箱">，仅作临时提示，不提交、不替代label、不支持换行与变量，且须注意可访问性与样式兼容性。
- 文章 · 前端 | 1个月前 | html 439浏览 收藏
