DEV Community

NikiMunger
NikiMunger

Posted on

clipPath、contain: layout style

clipPath

clip-path是 CSS 中非常强大和实用的属性，用来裁剪(clip)元素的可见区域，就像用“剪刀”把元素切成你想要的形状。
它并不改变元素的真实大小，只改变显示出来的部分。

常见语法 

clip-path: circle();
clip-path: ellipse();
clip-path: polygon();
clip-path: inset();
Enter fullscreen mode Exit fullscreen mode

inset(top right bottom left) 的含义

1.inset(0 0 0 0) —— 裁剪矩形区域
inset(top right bottom left) 的含义是：
从元素的每一侧向内“裁剪”多少距离。
写法：

inset(上 右 下 左)
Enter fullscreen mode Exit fullscreen mode

所以，inset(0 0 0 0)表示元素完全不被裁剪，裁剪区域刚好等于整个元素本身的矩形。

2.round 16px —— 裁剪矩形的圆角半径
加上 round 是用来给裁剪区域加 圆角 的。

round 16px
Enter fullscreen mode Exit fullscreen mode

表示：
裁剪的矩形区域四个角都是 16px 的圆角。

为什么要用 clip-path 而不用 border-radius？

可以硬裁剪子元素（包括溢出内容）

contain: layout style;

contain: layout style; 是 CSS 中 Containment（包含） 功能的一种写法，用来告诉浏览器：

这个元素是一个独立的区域，它在 layout（布局）和 style（样式计算） 两方面都跟外界隔离，可以单独优化。
这是浏览器的性能优化机制。

1.contain 是什么？

contain 用来告诉浏览器：

  • 我（这个元素）和外面的世界互不影响
  • 因此你可以 更高效地重绘 / 重排，不必从根节点开始重算

也就是说：
当这个元素内部变化时，浏览器不需要重新做全局的 layout/style，只用重新计算这个区域。

常用于：

  • 大型页面
  • 无限滚动列表
  • 组件化 UI（React/Vue 中常用）

2.contain: layout style

contain 值 作用
layout 元素内部的布局不会影响外部布局
style 元素的 CSS（如 counters、属性继承）不会影响外部

Top comments (0)