超级好用的css属性—

超级好用的css属性——clip-path

news2025/1/14 18:38:48

基本概念

circle()函数

ellipse()函数

polygon()函数

path()函数

总结

clip-path是CSS3中的一个属性，用于在元素上创建一个裁剪区域，以显示元素的一部分。它允许您选择性地显示元素的某个部分，而隐藏其他部分。clip-path属性可以用于各种形状和图像，包括矩形、圆形、多边形和SVG图形等。

基本概念

clip-path 属性用于定义元素的裁剪区域，以控制哪些部分可见和哪些部分隐藏。它允许您使用不同的函数和参数来创建复杂的裁剪形状。

在 CSS 中，clip-path 属性可以使用不同的函数来定义裁剪区域。以下是一些常用的函数：

circle()：创建一个圆形裁剪区域。参数是半径和圆心的坐标。
ellipse()：创建一个椭圆形裁剪区域。参数是横轴和纵轴的半径以及圆心的坐标。
polygon()：创建一个多边形裁剪区域。参数是构成多边形的顶点坐标。
path()：使用 SVG 路径来定义裁剪区域。参数是路径的字符串表示形式。

让我们来看一个简单的示例来演示如何使用 clip-path 属性：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .test {
      width: 400px;
      height: 300px;
      background: url("https://www.w3schools.com/css/img_forest.jpg") 100% center/cover;
      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    }
  </style>
</head>

<body>
  <div class="test"></div>
</body>

</html>

原本是长方形的图片只剩下菱形部分展示。

circle()函数

circle()函数接受两个参数：半径值和关键字at，紧随其后的是原点位置。半径值可以使用像素（px）或百分比（%）。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <svg width="200" height="200">  
    <circle cx="100" cy="100" r="80" clip-path="circle(50% at 100% 100%)" fill="blue" />  
  </svg>
</body>

</html>

在上面的代码中，我们创建了一个SVG图形，其中包含一个圆形元素。我们使用circle()函数来定义裁剪区域，该函数接受半径和圆心的坐标作为参数。在clip-path属性中，我们使用circle()函数来定义裁剪区域的形状，其中50%表示半径为元素宽度的一半。at后的坐标表示圆心的位置。

ellipse()函数

ellipse()函数接受三个参数：长轴半径、短轴半径和原点位置。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <svg width="200" height="200">  
    <ellipse cx="100" cy="100" rx="80" ry="40" clip-path="ellipse(50% 50% at 100% 100%)" fill="green" />  
  </svg>
</body>

</html>

在上面的代码中，我们创建了一个SVG图形，其中包含一个椭圆形元素。我们使用ellipse()函数来定义裁剪区域，该函数接受横轴半径、纵轴半径和圆心的坐标作为参数。在clip-path属性中，我们使用ellipse()函数来定义裁剪区域的形状，其中50%分别表示横轴和纵轴半径为元素宽度的一半。at后的坐标表示圆心的位置。

polygon()函数

polygon()函数接受一系列坐标点作为参数，每个坐标点由横纵坐标组成，并用空格分隔。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <svg width="200" height="200">  
    <polygon points="100,10 180,80 80,180 20,80" clip-path="polygon(0 0, 100% 0, 100% 100%, 0% 100%)" fill="yellow" />  
  </svg>
</body>

</html>

在上面的代码中，我们创建了一个SVG图形，其中包含一个多边形元素。我们使用polygon()函数来定义裁剪区域，该函数接受构成多边形的顶点坐标作为参数。在clip-path属性中，我们使用polygon()函数来定义裁剪区域的形状，其中四个点坐标表示一个四边形。

path()函数

path()函数接受一个SVG路径作为参数，该路径由一系列命令和坐标点组成。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <svg width="200" height="200">  
    <path d="M10,10 L190,10 L190,90 L10,90 Z" clip-path="path('M 10,10 L190,10 L190,90 L10,90 Z') " fill="red" />  
  </svg>
</body>

</html>

在上面的代码中，我们创建了一个SVG图形，其中包含一个路径元素。我们使用path()函数来定义裁剪区域，该函数接受一个路径的字符串表示形式作为参数。在clip-path属性中，我们使用了SVG路径命令来绘制一个从起始点到终止点的路径，其中 M表示移动到起始点，L表示从当前点绘制一条直线，Z表示关闭路径。以逆时针方向绘制路径将产生一个逆时针方向的多边形。