只倾斜容器不扭曲文字的核心解法是反向补偿：父容器 skew(20deg)，子元素 skew(-20deg) 拉正；或用伪元素+overflow:hidden实现视觉倾斜，避免影响布局与交互。
skew() 倾斜后内容也变形，怎么只倾斜容器不扭曲文字？
直接对盒子用 transform: skew(20deg)，里面的文字、图片全跟着歪，这不是展示需求——你要的是“视觉上倾斜的卡片”，不是“斜着写的字”。核心解法是反向补偿：先倾斜父容器，再对子元素用 skew(-20deg) 把内容拉正。
- 别在
div上直接 skew 后就完事，必须包裹一层内层容器专门做反向矫正 - 注意
transform的坐标系是基于元素自身原点的，所以skew()会绕左上角拉伸，若要绕中心倾斜，得配合transform-origin: center - 如果子元素用了
position: absolute或 flex 布局，反向 skew 可能破坏定位逻辑，此时更适合用伪元素 +overflow: hidden遮罩实现“假倾斜”
用伪元素模拟倾斜边框，避免 transform 影响布局流
当你只想让盒子看起来“向右倒”，又不想它真的脱离文档流、影响下方元素位置，transform 就不合适了——它虽然视觉位移，但占据的空间还是原来的矩形。这时候该用 ::before 伪元素画一个倾斜的背景层，再用 overflow: hidden 裁掉多余部分。
- 给盒子设
position: relative和overflow: hidden - 伪元素用
position: absolute全覆盖，background填色，再transform: skewX(-15deg) - 伪元素的
width要比父容器宽（比如width: 120%），否则倾斜后边缘会露白 - 这个方法完全不影响子元素的排版、事件绑定和可访问性，比真 transform 更稳妥
skewX 和 skewY 的参数单位不是角度？
skew() 系列函数接受的确实是角度值，但浏览器早期实现曾支持过 skew(0.5) 这种“tan 值”写法（即 tanθ = 0.5），现在已废弃。所有现代浏览器只认 deg 单位，写成 skewX(15deg) 才可靠。
- 漏写
deg（如skewX(15)）会导致整个声明失效，CSS 解析器直接跳过这条规则 -
skew(15deg, 5deg)是 X 和 Y 同时倾斜，不是叠加效果，而是复合剪切变换，数学上等价于两个矩阵相乘 - IE 9+ 支持
skewX/skewY，但不支持无前缀的skew()多参形式，需额外加-ms-transform: skew(15deg, 5deg)
倾斜盒子加阴影，box-shadow 为啥还是直的？
box-shadow 永远沿元素原始矩形边界投射，哪怕你用 transform: skew() 把盒子压扁拉长，阴影形状也不会变。想让阴影也“跟着歪”，只能放弃 box-shadow，改用 filter: drop-shadow()。
-
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3))作用于元素最终渲染图像，会响应 transform 效果 - 但
drop-shadow性能开销略大，尤其在滚动区域频繁重绘时，建议只在静止卡片或 hover 状态下启用 - 如果同时用了
transform和filter，某些旧版 Safari 会触发硬件加速 bug，导致文字发虚，可加backface-visibility: hidden缓解
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
