CSS方向裁切overflow:clip怎么用

    
Lorem ipsum dolor sit amet consectetur adipisicing elit. 


    
Lorem ipsum dolor sit amet consectetur adipisicing elit. 

.hidden {
    overflow: hidden;
}
.clip {
    overflow: clip;
}

此时，overflow: clip 与 overflow: hidden 的表现是一致的。

overflow: clip 在 x/y 轴上可单独设置

然而，overflow: clip 的与众不同之处在于，它可以单独设置给 x 轴或者 y 轴，使得容器拥有某一个方向上的裁剪能力，而相对的另外一个方向，允许溢出。

看看这个 DEMO：

这里的现象值得注意：

• 单单设置 overflow-x: hidden 或者 overflow-y: hidden，表现形式都和 overflow: hidden 一致，是全方位的裁剪

• 而水平 x 或竖直 y 方向的 overflow-x: clip/ overflow-y: clip 配合另一个方向的 overflow-x: visible，却能够实现一个方向允许溢出，一个方向实现裁剪！

需要解释一下上面两点：

• 设置 overflow: hidden 就会创建 BFC，因此没法只限制一个方向；而 overflow: clip 不会创建 BFC，因此它们在很多表现上会产生不一致的现象（譬如）

• overflow-x/y 设置为 hidden 时, overflow-y/x 会变成 auto, 即使设置为 visible

完整的 DEMO，你可以戳这里：CodePen Demo -- overflow: hidden & overflow: clip

至此，我们就实现了这样一种效果，允许元素在 x/y 方向上的单向裁剪，像是这样：

(上图允许 x 轴方向上的溢出，而 y 轴方向进行了裁剪)

上、下、左、右单个方向上的裁剪

OK，那么，如果再进一步。譬如有这么个需求，要求上、左、右方向允许溢出，而下方向需要裁剪，能做到么？

答案是可以的。

CSS 中其实还有多种方式可以进行元素的裁切，近似的实现类似于 overflow: hidden 的功能。

譬如，其中，我们可以使用 clip-path 实现上、下、左、右 单一方向的裁剪。

以上就是关于“CSS方向裁切overflow:clip怎么用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。