TOPIC
CSS样式技巧
从布局到动画到响应式，让官网每一处细节都更耐看。
CSS
TOPIC / 02
CSS 决定官网的耐看度
CSS 早就不只是改颜色调字号——Grid 与容器查询让布局随容器变化、自定义属性让主题切换变成变量赋值、backdrop-filter 让日系温柔风的渐变融合真正成立。这一分类沉淀我们在建站项目里反复打磨的 CSS 实战经验。
- Grid 布局
- CSS 变量
- 响应式排版
- 动画性能
ARTICLES
CSS技巧文章
覆盖布局、动画、响应式、堆叠上下文等建站常踩的 CSS 坑。
CSS Grid 实现不对称布局的3种写法对比
grid-template-areas、显式列宽、subgrid 三种思路的取舍与适用场景，附企业官网常见版式实战。
2026-07-28阅读全文 →
自定义属性在建站主题切换中的应用
CSS Variables 如何让暗色模式、品牌色切换变成一行 JS，附建站项目里完整的 token 体系设计。
2026-07-21阅读全文 →
clamp() 与容器查询：响应式排版的新思路
字号随视口流式变化的 clamp 写法，配合 @container 让组件自身响应容器尺寸，告别一刀切断点。
2026-07-14阅读全文 →
CSS 堆叠上下文：z-index 失效背后的真正原因
弹窗被遮住、z-index 怎么调都不对——理解 stacking context 形成条件，从根因解决层级问题。
2026-07-07阅读全文 →
backdrop-filter 与渐变蒙版实现日系温柔风融合
尧图建网站官网同款"左右图文渐变融合"的实现思路，毛玻璃 + 渐变蒙版的兼容写法。
2026-06-30阅读全文 →
移动端 1px 边框的6种解决思路与取舍
transform scale、box-shadow、viewport 缩放、SVG 边框——逐一对比精度、性能与兼容性。
2026-06-23阅读全文 →
CSS 动画性能：will-change 与 transform 的正确用法
哪些属性走合成层、哪些触发重排，will-change 该怎么用、什么时候反而拖累性能。
2026-06-16阅读全文 →
媒体查询断点设计：从移动优先到组件优先
建站项目里如何选断点、min-width 与 max-width 的取舍，配合容器查询走向组件优先。
2026-06-09阅读全文 →
RELATED
相关博文分类
CSS 学完后，下一步可以延伸到这些方向。
