标签：样式表

共 2 篇相关文章

IT 累计浏览 52

@function

CSS @function at-rule 是CSS自定义函数模块的核心功能，允许开发者定义可复用的函数块，提升样式表的动态性和模块化。该规则通过指定函数名（以双破折号开头，如 --my-function）、参数列表（每个参数可带类型声明如、和默认值）、返回类型（如）以及函数体（由CSS声明和规则构成，使用 result 描述符返回值）来实现。基本用法包括简单计算函数，如 --half 接受长度参数并返回其一半。类型检查确保输入参数符合声明类型，减少错误；支持逗号分隔列表作为参数，通过花括号包裹传递多个值。函数结果遵循CSS级联规则，可在媒体查询等条件下动态返回不同值，允许嵌套调用以实现代码复用。函数提供默认值选项，但自身无副作用，不能直接修改属性；循环依赖会被浏览器检测并标记为无效。浏览器支持通过 @supports 查询检查，目前该规范处于CSS Custom Functions and Mixins Module Level 1阶段，处于实验性功能。这一特性增强了CSS的编程能力，为前端开发提供更灵活的工具。

IT 累计浏览 3,592

CSS使用技巧大全

这篇讲的是如何用现代CSS把常见效果变得更简洁高效。作者从实际前端开发中的重复性工作出发，汇集了数十个能立刻提升工作效率的技巧。文章重点覆盖了Flexbox与Grid布局的灵活运用、视觉效果的精简实现，以及一些常被忽视的细节。比如，利用`aspect-ratio`属性轻松保持元素比例，无需计算百分比或padding-top hack；通过`min()`和`clamp()`实现流体排版，让字体大小和间距自然适应不同屏幕。在视觉设计方面，介绍了用`box-shadow`模拟边框的技巧（适用于虚线或动态粗细变化），以及`filter: drop-shadow()`如何对不规则形状（如PNG透明图标）进行精准投影。更进阶的部分还展示了如何用CSS变量管理主题、用`:has()`选择器实现父级样式切换，以及借助`scroll-driven-animations`创建基于滚动的动画效果，这些原本需要大量JavaScript才能实现的功能。每个技巧都附有对比说明或典型应用场景，比如`text-wrap: balance`如何优化多行标题的视觉平衡，而`@layer`又如何帮助管理复杂的样式优先级。对于日常写样式的开发者来说，这篇文章相当于一个高效的“工具箱”，提供了大量可复用的代码片段和思路，能有效减少对框架的依赖，并写出更轻量、更维护的样式方案。