标签：设计工具
共 22 篇文章
-
CSS 锚点定位指南：anchor() 函数与 tooltip 自动避让
深入解析 CSS 锚点定位：anchor-name 与 position-anchor 绑定、anchor() 与 anchor-size() 函数、position-try-fallbacks 翻转避让，附 tooltip 实战。
-
CSS contain 性能优化指南：渲染隔离与 content-visibility
深入解析 CSS contain 与 content-visibility 性能优化：contain 八种值、屏幕外跳过渲染原理、contain-intrinsic-size 占位与长列表实战。
-
CSS interpolate-size 尺寸插值指南：auto 过渡与 calc-size()
深入解析 CSS interpolate-size 尺寸插值属性：allow-keywords 取值、auto 等尺寸关键字插值原理、calc-size() 函数计算、与 max-height 技巧对比，附折叠面板实战案例。
-
CSS light-dark() 暗色模式完全指南：双主题颜色函数、color-scheme 与渐进降级
深入解析 CSS light-dark() 颜色函数：配合 color-scheme 声明原理、与 prefers-color-scheme 对比、CSS 变量双主题组织与渐进降级，附实战案例。
-
CSS scroll-driven 动画：scroll()/view() 时间线
深入解析 CSS scroll-driven 滚动驱动动画：scroll() 与 view() 时间线选型、animation-range 范围控制、命名时间线与渐进增强，附实战示例。
-
CSS @scope 作用域完全指南：甜甜圈作用域、下边界与组件级样式隔离
深入解析 CSS @scope 作用域：根选择器、下边界 to 子句、甜甜圈作用域（donut scope）、:scope 伪类与 & 选择器、与 Shadow DOM 的区别、避免选择器冲突与 BEM 替代方案。附基本作用域、甜甜圈作用域、卡片组件、导航菜单等实战示例。
-
CSS @starting-style 入场动画指南：display 切换与 popover 弹层
深入解析 CSS @starting-style 入场动画规则：嵌套与独立语法、首次渲染/display 切换/popover 三种触发场景、allow-discrete 离散过渡、与 animation/transition 对比选型，附实战案例。
-
CSS subgrid 子网格完全指南：嵌套网格轨道继承与对齐最佳实践
深入解析 CSS subgrid 子网格：双向轨道继承机制、四种方向选型、gap 自动继承与浏览器兼容性，附卡片墙与表单对齐实战示例。
-
CSS text-wrap 换行指南：balance 平衡与 pretty 优化
深入解析 CSS text-wrap 文本换行属性：wrap/nowrap/balance/pretty/stable 五种值、balance 平衡换行算法与 10 行限制、pretty 孤行优化策略，附渐进降级实战。
-
CSS view-transition 视图过渡完全指南：同文档/跨文档过渡、命名元素与伪元素动画
深入解析 CSS view-transition 视图过渡：同文档与跨文档过渡选型、view-transition-name 命名、伪元素树结构与自定义动画，附 SPA 与 MPA 实战示例。
-
CSS background 复合属性完全指南：多层背景叠加、简写语法、文字裁剪与视差效果
深入解析 CSS background 复合属性：8 个子属性、简写语法与斜杠规则、多层背景叠加、background-clip: text 文字裁剪、cover 与 contain 区别、fixed 视差陷阱，附实战示例。
-
CSS @container 容器查询指南：组件级响应式与 container-type
深入解析 CSS @container 容器查询：container-type 与 container-name 声明、@container 查询语法、与 @media 媒体查询的本质区别、组件级响应式设计，附卡片三栏自适应实战示例。
-
CSS @layer 层叠层完全指南：级联优先级、!important 反转与第三方库隔离
深入解析 CSS @layer 层叠层：层声明语句、具名层与匿名层、级联优先级规则（普通声明与 !important 反转）、未分层样式为何最高、嵌套层 framework.components、与 specificity 特异性关系、第三方库隔离与主题系统设计。附经典四层、第三方库隔离、主题覆盖等实战示例。
-
CSS Nesting 原生嵌套完全指南：& 选择器、@media 嵌套与 Sass 对比
深入解析 CSS Nesting 原生嵌套：& 嵌套选择器用法、隐式嵌套与显式嵌套区别、嵌套 @media / @supports / @container 等 at-rule、与 Sass/Less 预处理器嵌套的本质差异、浏览器兼容性、嵌套深度最佳实践。附卡片组件、按钮状态、响应式布局、导航菜单等实战示例。
-
CSS scroll-snap 滚动捕捉完全指南：轮播、全屏滚动、分页导航与捕捉策略
深入解析 CSS scroll-snap 滚动捕捉：scroll-snap-type 轴与严格度、scroll-snap-align 对齐、scroll-snap-stop 防跳过、scroll-padding/margin 间距控制、mandatory 与 proximity 选型，附轮播与全屏滚动实战。
-
CSS writing-mode 书写模式完全指南：竖排文字、多语言排版与国际化文本方向
深入解析 CSS writing-mode 书写模式：5 种值详解、text-orientation 与 direction 多语言文本方向、text-combine-upright 数字横排，附中文竖排与 RTL 实战示例。
-
CSS animation 动画完全指南：@keyframes 关键帧、八大子属性、缓动函数与性能优化
深入解析 CSS animation 动画系统：@keyframes 关键帧、八大子属性、cubic-bezier 缓动曲线、fill-mode 填充模式与 GPU 合成层优化实践。
-
CSS clip-path 路径裁剪指南：polygon/circle/ellipse/inset 函数
深入解析 CSS clip-path 四类裁剪函数：polygon 多边形交互式顶点编辑、circle 圆形、ellipse 椭圆、inset 内嵌矩形，含 inset round 圆角语法与动画顶点插值，附实战示例。
-
CSS filter 滤镜指南：blur/contrast 等 10 种函数原理
深入解析 CSS filter 滤镜属性：blur/brightness/contrast 等 10 种函数原理、滤镜组合顺序、GPU 合成层优化、drop-shadow 与 box-shadow 区别、backdrop-filter 毛玻璃效果实战。
-
CSS Flexbox 弹性布局完全指南：主轴交叉轴、容器与项属性、实战布局模式
深入解析 CSS Flexbox 弹性布局：主轴与交叉轴、容器与单项属性、flex 三件套协同机制，附居中与圣杯等典型布局实践。
-
CSS Grid 网格布局完全指南：轨道、单元格、二维布局与典型布局模式
深入解析 CSS Grid 二维布局：轨道与 fr 单位、显式与隐式轨道、跨列跨行、自动排列与密集填充，附三列等宽与圣杯等典型布局实践。
-
CSS transition 过渡指南：cubic-bezier 曲线与 steps 阶跃
深入解析 CSS transition 过渡系统：四大子属性、cubic-bezier 曲线数学原理、steps 阶跃函数、可过渡属性清单与 GPU 合成层优化实践。