CSS方向裁切 overflow: clip
本文将给大家介绍一个CSS新特性,从 Chrome 90 开始,overflow 新增的一个新特性 — overflow: clip
,使用它,轻松地对溢出方向进行控制。
overflow: clip 为何
首先,简单介绍下 overflow: clip
的用法。
overflow: clip
: 与 overflow: hidden
的表现形式极为类似,也是对元素的 padding-box
进行裁剪。
但是,它们有两点不同:
1、也就是 overflow: clip
内部完全禁止任何形式的滚动。当然,这个不是今天的重点,暂且略过不谈。
MDN 原文:The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.
2、overflow: clip
可以从 x,y 轴方向上对裁剪进行,控制,而 overflow: hidden
不行。
重点在于这一点。我们来简单示意一下:
overflow: clip && overflow: hidden 的表现
我们来看对于不区分方向,overflow: clip
与 overflow: hidden
的表现形式:
<div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p> </div> <div class="hidden"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p> </div> <div class="clip"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p> </div>
.hidden { overflow: hidden; } .clip { overflow: clip; }
我们设置了 3 个 DIV 容器,其中一个不设置 overflow,另外两个分别设置 overflow: clip
与 overflow: hidden
。效果如下:
此时,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
,却能够实现一个方向允许溢出,一个方向实现裁剪!
至此,我们就实现了这样一种效果,允许元素在 x/y 方向上的单向裁剪,像是这样:
(上图允许 x 轴方向上的溢出,而 y 轴方向进行了裁剪)
上、下、左、右单个方向上的裁剪
OK,那么,如果再进一步。譬如有这么个需求,要求上、左、右方向允许溢出,而下方向需要裁剪,能做到么?
答案是可以的。
CSS 中其实还有多种方式可以进行元素的裁切,近似的实现类似于 overflow: hidden
的功能。
譬如,其中,我们可以使用 clip-path
实现上、下、左、右 单一方向的裁剪。
1. 本站所有素材(未指定商用),仅限学习交流。
2. 会员在本站下载的VIP素材后,只拥有使用权,著作权归原作者及码云笔记网所有。
3. 原创商用和VIP素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。
码云笔记 » CSS方向裁切 overflow: clip