岩石教程

css clip-path（裁剪）

2024-07-30 07:22:32 267
clip-path 是 CSS 的一个属性，它允许你创建复杂的形状来裁剪元素，从而实现很多复杂的效果。

基本语法

clip-path: none | <clip-source>;
  • none：不应用剪裁，元素保持其原始形状。
  • <clip-source>：定义剪裁路径，可以是基本形状、SVG 路径或者 URL。

参数说明

clip-path 参数说明及示例

参数描述示例
none不应用任何剪裁效果，元素保持其原始形状。clip-path: none;
circle()创建一个圆形剪裁区域。参数是半径，可以是长度单位或百分比。clip-path: circle(50%);
ellipse()创建一个椭圆形剪裁区域。参数是横轴和纵轴的半径，可以是长度单位或百分比。clip-path: ellipse(50% 25%);
polygon()创建一个多边形剪裁区域。参数是一系列顶点坐标，使用百分比或长度单位。clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
path()使用 SVG 路径数据创建剪裁区域。参数是一个路径字符串。clip-path: path('M 10,10 H 90 V 90 H 10 Z');
inset()创建一个矩形剪裁区域。参数是上下左右的偏移量，可以是长度单位或百分比。clip-path: inset(10% 20% 30% 40%);
url()引用外部 SVG 元素作为剪裁区域。参数是一个 SVG 元素的 URL。clip-path: url(#myClipPath);

使用案例

以下是一些 clip-path 的使用案例：

1. 使用 circle() 创建圆形剪裁区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS clip-path Circle Example</title>
    <style>
        .clip-circle {
            width: 200px;
            height: 200px;
            background: url('https://via.placeholder.com/200') no-repeat center/cover;
            clip-path: circle(50%);
        }
    </style>
</head>
<body>
    <div class="clip-circle"></div>
</body>
</html>

2. 使用 ellipse() 创建椭圆形剪裁区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS clip-path Ellipse Example</title>
    <style>
        .clip-ellipse {
            width: 200px;
            height: 200px;
            background: url('https://via.placeholder.com/200') no-repeat center/cover;
            clip-path: ellipse(50% 25%);
        }
    </style>
</head>
<body>
    <div class="clip-ellipse"></div>
</body>
</html>

3. 使用 polygon() 创建多边形剪裁区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS clip-path Polygon Example</title>
    <style>
        .clip-polygon {
            width: 200px;
            height: 200px;
            background: url('https://via.placeholder.com/200') no-repeat center/cover;
            clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
        }
    </style>
</head>
<body>
    <div class="clip-polygon"></div>
</body>
</html>

4. 使用 path() 创建 SVG 路径剪裁区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS clip-path Path Example</title>
    <style>
        .clip-path {
            width: 200px;
            height: 200px;
            background: url('https://via.placeholder.com/200') no-repeat center/cover;
            clip-path: path('M 10,10 H 190 V 190 H 10 Z');
        }
    </style>
</head>
<body>
    <div class="clip-path"></div>
</body>
</html>

5. 使用 inset() 创建矩形剪裁区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS clip-path Inset Example</title>
    <style>
        .clip-inset {
            width: 200px;
            height: 200px;
            background: url('https://via.placeholder.com/200') no-repeat center/cover;
            clip-path: inset(10% 20% 30% 40%);
        }
    </style>
</head>
<body>
    <div class="clip-inset"></div>
</body>
</html>

6. 使用 url() 引用外部 SVG 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS clip-path URL Example</title>
    <style>
        .clip-url {
            width: 200px;
            height: 200px;
            background: url('https://via.placeholder.com/200') no-repeat center/cover;
            clip-path: url(#clipPolygon);
        }
    </style>
</head>
<body>
    <svg width="0" height="0">
        <clipPath id="clipPolygon">
            <polygon points="50 0, 100 100, 0 100" />
        </clipPath>
    </svg>
    <div class="clip-url"></div>
</body>
</html>

兼容性

clip-path 在大多数现代浏览器中都得到了良好的支持，但旧版浏览器可能不完全支持。确保在生产环境中使用前进行兼容性测试。