首页 > 文章 > 前端

CSS裁剪怎么用？属性使用教程

时间：2025-09-15 10:14:30 400浏览收藏

一分耕耘，一分收获！既然都打开这篇《CSS裁剪怎么用？属性使用教程》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

CSS裁剪通过clip-path属性定义元素可见区域，支持inset、circle、ellipse、polygon等函数创建矩形、圆形、椭圆、多边形裁剪，也可引用SVG路径实现复杂形状，结合百分比和vw/vh单位可实现响应式设计，与mask相比clip-path为矢量裁剪、兼容性更好，适用于精确裁剪场景。

CSS裁剪怎么实现_CSS裁剪属性使用教程

CSS裁剪，简单来说，就是控制元素可见区域的技术。它允许你只显示元素的一部分，隐藏其他部分，这在创建各种视觉效果和布局时非常有用。

CSS裁剪主要通过 clip-path 属性实现。

解决方案

clip-path 属性定义了一个元素的可见区域。超出这个区域的部分会被隐藏。你可以使用不同的函数来创建各种形状的裁剪区域，比如矩形、圆形、椭圆、多边形，甚至可以引用SVG路径。

1. 基本语法：

clip-path:  |  | none | initial | inherit;

: 引用一个指向的SVG 元素。
: 使用CSS形状函数定义裁剪区域，例如 inset(), circle(), ellipse(), polygon().
none: 不应用任何裁剪。
initial: 设置为默认值 none.
inherit: 从父元素继承 clip-path 值。

2. 常用形状函数：

inset(): 创建一个矩形裁剪区域。
```
clip-path: inset(top right bottom left); /* 类似 margin 的简写 */
clip-path: inset(10px 20px 30px 40px);
```
例如，inset(10px 20px 30px 40px) 会在顶部留出10px，右侧留出20px，底部留出30px，左侧留出40px的空白区域。
circle(): 创建一个圆形裁剪区域。
```
clip-path: circle(radius at center-x center-y);
clip-path: circle(50px at 100px 75px);
```
circle(50px at 100px 75px) 创建一个半径为50px，圆心坐标为(100px, 75px)的圆形裁剪区域。
ellipse(): 创建一个椭圆形裁剪区域。
```
clip-path: ellipse(radius-x radius-y at center-x center-y);
clip-path: ellipse(60px 40px at 50% 50%);
```
ellipse(60px 40px at 50% 50%) 创建一个x轴半径为60px，y轴半径为40px，圆心位于元素中心(50%, 50%)的椭圆形裁剪区域。
polygon(): 创建一个多边形裁剪区域。
```
clip-path: polygon(point1, point2, point3, ...);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* 三角形 */
```
polygon(50% 0%, 0% 100%, 100% 100%) 创建一个三角形，三个顶点分别为元素的顶部中心，左下角和右下角。