CSS方向裁切overflow:clip怎么用
导读:本文共837.5字符,通常情况下阅读需要3分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要:需要解释一下上面两点:设置 overflow: hidden 就会创建 BFC,因此没法只限制一个方向;而 overflow: clip 不会创建 BFC,因此它们在很多表现上会产生不一致的现象(譬如)overflow-x/y 设置为 hidden 时, overflow-y/x 会变成 auto, 即使设置为 visible完整的 DEMO,你可以戳这里:CodePen Demo -- over... ...
目录
(为您整理了一些要点),点击可以直达。需要解释一下上面两点:
设置
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怎么用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
CSS方向裁切overflow:clip怎么用的详细内容,希望对您有所帮助,信息来源于网络。