skew()第一个参数控制水平倾斜角度，第二个控制垂直倾斜角度；单参数时默认垂直为0deg；文字模糊因gpu未启用和像素对齐破坏，可加translatez(0)触发硬件加速；混用rotate()时执行顺序为从右到左。
skew() 的两个参数分别控制什么
第一个参数是水平方向倾斜角度，第二个是垂直方向倾斜角度。只写一个参数时，默认第二个为 0deg，也就是只水平倾斜。skew(30deg) 等价于 skew(30deg, 0deg)；skew(0deg, -15deg) 则只垂直倾斜向上（负值让元素顶部向左偏）。注意：角度单位必须写，skew(30) 不生效。
为什么 skew() 后文字变模糊或锯齿严重
这是 GPU 加速未启用 + 像素对齐被破坏的典型表现。浏览器对斜切后的像素采样不友好，尤其在非整数缩放比或高 DPI 屏幕上更明显。解决方法有限但有效：
- 给元素加
transform: translateZ(0)或will-change: transform，强制触发硬件加速 - 避免对
<input>、<textarea></textarea>等表单控件直接 skew，它们内部渲染逻辑复杂，易出重绘异常 - 如果只是视觉倾斜需求，优先考虑用伪元素 +
skew()覆盖文字，保持原文本不受变形影响
skew() 和 rotate() 混用时顺序很重要
CSS transform 是从右到左执行的，transform: skewX(20deg) rotate(10deg) 先旋转再水平倾斜；反过来写就先倾斜再旋转，结果完全不同。常见错误是以为“写在前面的先执行”。实际是「书写顺序 = 执行逆序」。调试时建议：
- 单次只用一个 transform 函数，确认效果后再叠加
- 用
transform: skewX(20deg) translateX(10px)这类组合时，注意 skew 会改变坐标系方向，后续 translate 的 X 不再是页面水平方向 - 需要稳定控制，改用
matrix()更可靠，但可读性差，适合自动化生成
skewY() 在 Flex 或 Grid 容器中容易失效
当父容器是 display: flex 或 display: grid，且子元素设置了 align-items: center 或 justify-content 类属性时，skewY() 可能看起来没反应——其实是变形发生了，但基线和对齐逻辑让视觉位移被抵消。本质是：skew 不改变元素盒模型尺寸，但改变了绘制区域与布局坐标系的关系。
立即学习“前端免费学习笔记（深入）”；
- 检查是否意外设置了
overflow: hidden，skew 后内容溢出会被裁剪 - Flex 项目默认
align-self: stretch，skewY 后高度计算仍按原始矩形，可能导致上下留白异常 - 稳妥做法：在外层包一层
<div>，把 skew 放在外层，内容保持正常流，避免和布局模式冲突 事情说清了就结束。真正难的不是写对 <code>skew()，而是判断它是不是当前场景最合适的方案——很多时候用 border 或渐变模拟倾斜线，比真 skew 一个块级元素更稳。
