Stylus CSS 预处理器
Stylus 是 CSS 预处理器缩进语法可选冒号和括号。变量和混合。透明 mixin。本文用 Stylus 简化按钮样式编写。
CSS 中的 box-shadow 阴影效果
box-shadow: 10px 10px 20px rgba(0,0,0,0.2) 分别设置水平偏移垂直偏移模糊半径和颜色。多个阴影用逗号分隔。本文展示各种阴影效果。
CSS 中的 min-height 和 max-height 约束
min-height 设最小高度内容不足时保持该高度。max-height 设最大高度内容超出时溢出或滚动。两者配合使用实现自适应的卡片布局。
CSS 中的 resize 可缩放元素
resize:both 让元素可拖动调整大小横竖都行。resize:horizontal 只能调宽度resize:vertical 只能调高度。默认只对 textarea 有效。
CSS 中 background-clip 文字渐变
background-clip:text 配合 -webkit-text-fill-color:transparent 让背景渐变显示在文字上。实现炫酷的文字渐变效果不需要图片。
CSS 中的 all 属性重置所有样式
all:initial 重置元素的所有样式为浏览器默认值all:unset 重置为继承或默认值。适合解决第三方组件样式的污染问题。
CSS 中的 will-change 提前告诉浏览器变化
will-change:transform 告诉浏览器元素将要变换提前做好 GPU 合成准备。过度使用 will-change 反而会占用更多内存。只用在已知有动画的元素上。
CSS 中的 3D 变换 transform
perspective 设置透视距离rotateX/rotateY 绕轴旋转translateZ 沿 Z 轴移动。父元素加 transform-style:preserve-3d 保留子元素的 3D 效果。
CSS 中的 clip-path 裁剪形状
clip-path: circle(50%) 和 polygon(0 0, 100% 0, 50% 100%) 创建圆形和多边形裁剪。裁剪后元素的事件响应区域也变了。本文展示 clip-path 的应用。
CSS 中的 inherit initial unset revert 继承关键字
inherit 强制继承父值initial 使用浏览器默认值unset 继承属性的值或默认值。revert 重置到用户样式。本文区分这些关键字的行为。
CSS writing-mode 文字竖排
writing-mode:vertical-rl 让文字从上到下从右到左排列适合中文古文和日本语排版。配合 text-orientation 控制文字方向。本文展示竖排的 CSS 写法。
CSS grid-template-areas 区域命名布局
grid-template-areas 用名字标记网格区域比数字定位更直观。用 . 表示空单元格。本文实现一个常见的页面三行两列布局。
CSS 中的 currentColor 当前文本颜色
currentColor 是 CSS 中表示当前元素 color 值的变量。设置 border 或 background 时用 currentColor 会自动跟随文本颜色不需要额外声明。
CSS 中的 aspect-ratio 控制宽高比
aspect-ratio:16/9 让元素保持 16:9 宽高比不受内容尺寸影响。配合 max-width 可以实现自适应的视频容器。本文展示 aspect-ratio 的兼容性和用法。
CSS 变量 var 实现主题切换
用 CSS 变量存主题色在 :root 下定义亮色变量在 [data-theme=dark] 下定义暗色变量。通过 JS 切换 data-theme 实现一键换主题。本文给出完整的主题切换方案。
CSS 伪元素 before after 的 content 属性
::before 和 ::after 必须设置 content 属性才会显示。content 可以放文本/attr() 读取属性值/url() 引用图片。本文展示伪元素的各种 content 用法。
CSS scroll-behavior smooth 平滑滚动
scroll-behavior:smooth 让锚点跳转和 scrollIntoView 的滚动变得平滑不需要 JavaScript。设置到 html 元素上全局生效。本文给出配置方式和浏览器兼容性说明。
CSS backdrop-filter 背景模糊效果
backdrop-filter:blur(10px) 对元素背后的区域应用模糊效果产生毛玻璃质感。相比 filter 只作用于元素本身backdrop-filter 不影响子元素的内容。
CSS object-fit 控制替换元素的尺寸适配
object-fit:cover 让图片覆盖容器按比例缩放并裁剪object-fit:contain 完整显示图片。这是 CSS 中处理图片自适应的核心属性。本文对比各值的表现。
CSS calc 在不同长度单位间计算
calc(100% - 80px) 允许在不同长度单位间做运算。加减法两边单位可以不同乘除法至少一边是数字。本文展示 calc 在响应式布局中的实际应用。
CSS 伪类 :has 选择器父元素选择终于有了
:has 是 CSS 选择器的革命性增强可以根据子元素是否存在选择父元素。ul:has(li.active) 选择含 active 项的列表。本文展示 :has 的多种实际应用场景。
font-display swap 解决字体加载文字闪烁
浏览器加载自定义字体时默认隐藏文字直到字体下载完这段时间用户看不到内容。font-display:swap 先显示后备字体等自定义字体加载完再替换同时可能造成 FOUT。本文介绍 font-display 各值的差异。
Tailwind CSS 工具优先
采用 Tailwind 的 utility-first 方式编写样式，学习配置主题、变体与提取组件的技巧。