有意思的方向裁切 Overflow：Clip

,‍本文将介绍一个新特性，从 Chrome 90 开始，overflow 新增的一个新特性 — overflow: clip，使用它，轻松地对溢出方向进行控制。,首先，简单介绍下 overflow: clip 的用法。,overflow: clip: 与 overflow: hidden 的表现形式极为类似，也是对元素的 padding-box 进行裁剪。,但是，它们有两点不同：,重点在于这一点。我们来简单示意一下：,我们来看对于不区分方向，overflow: clip 与 overflow: hidden 的表现形式：,我们设置了 3 个 DIV 容器，其中一个不设置 overflow，另外两个分别设置 overflow: clip 与 overflow: hidden。效果如下：,,此时，overflow: clip 与 overflow: hidden 的表现是一致的。,然而，overflow: clip 的与众不同之处在于，它可以单独设置给 x 轴或者 y 轴，使得容器拥有某一个方向上的裁剪能力，而相对的另外一个方向，允许溢出。,看看这个 DEMO：,,这里的现象值得注意：,至此，我们就实现了这样一种效果，允许元素在 x/y 方向上的单向裁剪，像是这样：,,(上图允许 x 轴方向上的溢出，而 y 轴方向进行了裁剪)。,OK，那么，如果再进一步。譬如有这么个需求，要求上、左、右方向允许溢出，而下方向需要裁剪，能做到么？,答案是可以的。,CSS 中其实还有多种方式可以进行元素的裁切，近似的实现类似于 overflow: hidden 的功能。,譬如，其中，我们可以使用 clip-path 实现上、下、左、右 单一方向的裁剪。,好了，本文到此结束，今天是一个非常小的技巧，希望对你有帮助 :),[1]CodePen Demo — overflow: hidden & overflow: clip: https://codepen.io/Chokcoco/pen/LYdgvxm。,[2]如何不使用 overflow: hidden 实现 overflow: hidden: https://github.com/chokcoco/iCSS/issues/90。,[3]Github — iCSS: https://github.com/chokcoco/iCSS。,