只倾斜容器不扭曲文字需用伪元素或反向skew抵消：对父容器skew()，子容器用skew(-xdeg)；注意热区仍为原矩形，可用clip-path修正。
skew() 倾斜后元素内容也歪了，怎么只倾斜容器不扭曲文字？
直接用 skew() 会让整个元素（包括子内容）一起倾斜，文字、图片全跟着歪——这不是“视觉倾斜”，是真实坐标系变形。真要只让容器边框看起来斜，内容保持正，得用伪元素或额外包裹层。
- 推荐方案：用
::before或::after伪元素画一个倾斜的背景层，本体保持正常 - 或者给内容套一层
<div class="content">，对父容器 <code>skew()，再对子容器用反向skew(-10deg)抵消（注意：会累积 transform，且可能影响子元素定位） - 别在
input、button这类原生控件上硬套skew()，焦点框、光标、默认样式会错位，尤其 Safari 下表现混乱 -
skewX(15deg)表示水平方向倾斜 15 度，垂直坐标轴不变 -
skewY(-10deg)表示垂直方向倾斜 −10 度，相当于向下左拉伸 - 两个值同时用：
skew(15deg, -10deg)，顺序不能颠倒（X 在前，Y 在后） - 别混用单位，
skew(15deg, 0.2rad)不合法，所有参数必须统一为deg - 现象举例：一个右上角倾斜的 banner，视觉上顶到了视口右上，但鼠标移到“看起来”的右上角却点不到，因为真实热区还在原位置
- 解决办法：用
clip-path配合skew做视觉+交互一致；或改用transform: rotate()+ 定位微调（旋转比倾斜更容易预测热区） - 如果必须用
skew且需精准交互，加一层透明position: absolute的覆盖层，手动按倾斜后形状设置clip-path - 不要依赖 Autoprefixer 自动补全
skew——它默认不加-ms-前缀，IE 会完全失效 - 移动端做倾斜动画时，避免在
will-change: transform里只写skew，某些安卓 WebView 渲染异常，建议统一用transform - 如果项目还需兼容 IE10，记得加
transform-origin: center显式声明，否则skew默认以左上角为基点，容易偏出预期
skewX() 和 skewY() 参数单位是度还是弧度？
是度（deg），不是弧度，也不接受无单位数字。写成 skewX(30) 是无效的，必须带单位：skewX(30deg)。浏览器不会自动补全，CSS 解析失败时会静默忽略该声明。
skew 后元素点击区域和视觉位置对不上
这是最常被忽略的坑：skew() 只改变渲染效果，不改变文档流和 hit-testing 区域（即鼠标响应范围）。倾斜后的元素，实际可点击/悬停区域仍是原始矩形框。
IE 和旧版 Safari 对 skew 的兼容性要注意什么？
IE 9+ 支持 transform，但只认带前缀的 -ms-transform: skewX(10deg)；iOS Safari 8.4 以下不支持 skewY() 单独使用，必须写成 skew(0, 10deg) 才生效。
skew 看似简单，但真正用稳的关键不在“怎么写”，而在“它改了什么、没改什么”。尤其是热区错位和嵌套抵消时的 transform 累积，调试起来往往要打开开发者工具反复切 toggle 才能看清。
