css

在云端易逍遥

前端必学的 CSS Grid 布局体系💡 除了使用绝对单位，还可以使用百分比。grid-template-areas用来通过命名区域的方式定义网格布局，让代码更直观。需要 grid-area 配合使用

（4种场景）单行、多行文本超出省略号隐藏在日常开发中，我们常会遇到这样的场景：当文字超出宽或文字个数过多的时候，需要用省略号去隐藏，如下图所示：

[译] Composition in CSSTailwind 和一些工具库，一直推动「组合」理念，但依我看，它们的「组合」未免太过天真。像这种一条一条添加 class……

来全面地review一下Flex布局（面试可用）面试时怎么给面试官讲Flex？这个问题很宽泛，其实最核心的问题不过是如何介绍Flex、如何背一些可能被问到的固定题、如何使用Flex实现一些简单的布局，接下来就按照上面的逻辑来写这篇文章吧

用户45820315317

CSS特异性：如何精准控制样式而不失控？CSS特异性（Specificity）是前端开发中一个关键但常被忽视的概念。理解它不仅能解决样式冲突问题，还能写出更优雅、更易维护的代码。让我们一起来探索这个看似简单实则精妙的概念。

CSS 动画属性精讲：从基础到实战CSS 动画是实现页面动态效果的核心技术之一，无需依赖 JavaScript，即可完成元素的位移、旋转、缩放、透明度变化等交互效果。其核心由两部分组成： @keyframes 关键帧定义（规定动画 “做什么”）和动画属性（规定动画 “怎么播”）。本文将从基础概念到实战案例，全面拆解 CSS 动画的核心知识点

HTML&CSS：谁懂啊！用代码 “擦去”图片雾气该 HTML 文件本质是通过SVG 滤镜组合与 CSS 交互逻辑，实现图片除雾 + 冰雪质感强化的视觉效果，同时搭配鼠标悬停光点、自定义雪花光标等交互，让除雾后的图片更贴合冰雪主题。

HTML&CSS：好精致的导航栏该 HTML 文件是一个具备高级交互效果的导航操作栏（Action Bar）实现，核心特点是通过现代 CSS 特性与 JavaScript 逻辑结合，打造了跟随选中 / 交互元素动态移动的视觉指示器，整体交互流畅且视觉效果精致。

“蒙”出花样！用 CSS Mask 实现丝滑视觉魔法在前端开发中, CSS 不再仅仅用于布局和样式修饰, 越来越多的高级视觉效果也可以通过纯 CSS 实现, 其中就包括令人惊艳的蒙版效果。mask-image 作为 CSS 中用于控制元素可见区域的强大属性, 能够帮助开发者实现类似 Photoshop 中的遮罩操作, 无需借助复杂的图像处理。无论是实现渐隐文字、柔和的图像遮罩, 还是动态的手电筒追光效果, mask-image 都提供了灵活而优雅的解决方案。本文将深入介绍 mask-image 的基本用法、支持的各种类型(如渐变、SVG)、配套属性

小帆聊前端

Flex 布局实战指南：从踩坑到精通，解决 90% 布局难题“为什么我用justify-content: center却无法垂直居中？”“align-items和align-content到底什么时候生效？”

【CSS】层叠上下文和z-indexz-index 的作用范围受“层叠上下文（stacking context）”影响。层叠上下文是浏览器渲染时的一个独立空间，z-index 只在同一层叠上下文里比较。一个元素可能会创建新的层叠上下文，比如：

【CSS学习笔记3】css特性1.1层叠性：就近原则，最新定义的样式1.2继承性：子标签集成父标签的样式，如文本和字号行高的继承：不加单位指的是当前文字大小的倍数

睡不着先生

CSS `:has()` 实战指南：让 CSS 拥有“if 逻辑”你是否经常写这样的 JS：现在，只需要用 :has()，你就能让 CSS 自己完成判断。:has() 是一个关系伪类选择器，允许你根据子元素或后代元素的状态，来影响父元素的样式。

css的基本知识属性选择器允许根据元素的属性及属性值来选择元素：除了常见的:hover、:active，这些伪类也非常实用：

css `lh`单位lh 代表 line-height 单位，意思是「当前元素的行高」。它的计算方式是：1lh = 当前元素计算后的 line-height 的值

用html5写一个flappybird游戏<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flappy Bird</title> <style> body { margin: 0; padding: 0; display: flex; justify-content: center; align-items:

孩子你要相信光

css之一个元素可以同时应用多个动画效果一个元素可以同时运行多个CSS动画通过animation属性使用逗号分隔多个动画值来实现每个动画可以有自己的持续时间、延迟、重复次数和时间函数

小刘鸭地下城

优雅表格设计：CSS 美化技巧详解一个普通 Table 分步骤进行美化代码第一列左对齐，其他列右对齐

小刘鸭地下城

网页深色模式完整实现：从响应式设计到系统主题联动在 <head> 中添加 <meta name="color-scheme" content="light dark">

javascript文本长度检测与自动截取，用于标题长度检测实时检测的效果，比较友好。创建一个文本输入区域实时显示当前文本长度和最大允许长度当长度超过90时自动截取文本