css 之 clip-path

文章目录

- 概要
- - 初始支持
  - 标准化进程
  - 目前状况
- clip-path 应用
- - 基本语法和形状函数
  - 具体应用示例及场景
  - - 1. 圆形头像
    - 2. 不规则卡片效果
    - 3. 图像切换动画
    - 4. 响应式设计中的形状调整
  - clip-path 之 insert
  - - 基本语法
    - 实例
    - - 1. 简单的矩形剪裁
      - 2. 不同边不同缩进的剪裁
      - 3. 带圆角的矩形剪裁
      - 4. 使用百分比进行剪裁

概要

clip-path 属性是 CSS 中用于创建剪裁区域的属性，它的发展历程如下：

初始支持

clip-path 最早在 CSS Shapes Module Level 1 规范草案中被提出。浏览器对其的初步支持大约始于 2010 年代中期。
Chrome：从 Chrome 24 版本（2013 年左右）开始，需要添加 -webkit- 前缀来支持 clip-path 属性，例如 -webkit-clip-path 。从 Chrome 35 版本（2014 年左右）开始，不再需要前缀就能支持该属性。
Safari：Safari 也较早开始支持 clip-path ，同样最初需要 -webkit- 前缀，后来逐步实现了无前缀的支持。
Firefox：Firefox 从 3.5 版本就开始支持 clip-path 的早期版本，但功能有限，在 Firefox 31 版本（2014 年左右）开始支持更完整的 clip-path 特性，且不需要前缀。

标准化进程

CSS Shapes Module Level 1 规范在不断发展和完善，clip-path 属性也在持续改进。随着规范的推进，浏览器对 clip-path 的支持也越来越稳定和全面。
到后来的 CSS Shapes Module Level 2 规范，进一步扩展了 clip-path 的功能，如支持更多的函数和更复杂的路径定义。

目前状况

现在，主流浏览器都广泛支持 clip-path 属性，并且无需添加前缀。开发者可以使用 clip-path 轻松创建各种复杂的剪裁效果，如圆形、椭圆形、多边形等，为网页设计带来更多的创意和灵活性。

你可以通过 Can I use 网站查看不同浏览器对 clip-path 属性的具体支持情况。

clip-path 应用

clip-path 属性允许你创建一个剪裁区域，该区域以外的部分将被隐藏，从而实现各种独特的图形效果。以下是关于它的详细应用及场景介绍：

基本语法和形状函数

clip-path 属性可以使用多种形状函数来定义剪裁区域，常见的有：

inset()：用于创建矩形剪裁区域。
circle()：创建圆形剪裁区域。
ellipse()：创建椭圆形剪裁区域。
polygon()：创建多边形剪裁区域。

具体应用示例及场景

1. 圆形头像

应用场景：在社交网站、用户信息展示等场景中，经常会使用圆形头像来展示用户的个人形象。
代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.circular-avatar {width: 100px;height: 100px;background-image: url('your-image-url.jpg');background-size: cover;clip-path: circle(50%);}</style>
</head><body><div class="circular-avatar"></div>
</body></html>

代码解释：通过 clip-path: circle(50%); 将元素剪裁成圆形，50% 表示以元素中心为圆心，半径为元素宽度或高度的一半。

2. 不规则卡片效果

应用场景：在网页设计中，为了增加页面的趣味性和独特性，可以使用不规则形状的卡片。
代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.irregular-card {width: 200px;height: 150px;background-color: #f0f0f0;clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);}</style>
</head><body><div class="irregular-card"></div>
</body></html>

代码解释：polygon() 函数通过指定一系列的坐标点来定义多边形的形状。这里的 polygon(0 0, 100% 0, 80% 100%, 0 100%) 定义了一个左上角、右上角、右下角偏左和左下角相连的不规则四边形。

3. 图像切换动画

应用场景：在图片轮播、广告展示等场景中，可以使用 clip-path 结合 CSS 动画实现独特的图像切换效果。
代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.image-container {position: relative;width: 300px;height: 200px;}.image {position: absolute;width: 100%;height: 100%;object-fit: cover;animation: clipAnimation 5s infinite alternate;}@keyframes clipAnimation {0% {clip-path: circle(0% at 0 0);}100% {clip-path: circle(100% at 100% 100%);}}</style>
</head><body><div class="image-container"><img class="image" src="your-image-url.jpg" alt="Image"></div>
</body></html>

代码解释：通过 @keyframes 定义动画，在动画过程中改变 clip-path 的值，实现从左上角的一个小圆逐渐扩展到右下角的一个大圆的剪裁效果，从而达到图像切换的视觉效果。

4. 响应式设计中的形状调整

应用场景：在响应式网页设计中，根据不同的屏幕尺寸动态调整元素的形状。
代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.responsive-shape {width: 100%;height: 200px;background-color: lightblue;clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}@media (max-width: 600px) {.responsive-shape {clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%);}}</style>
</head><body><div class="responsive-shape"></div>
</body></html>

代码解释：在屏幕宽度小于 600px 时，通过媒体查询改变 clip-path 的值，将元素的形状从矩形变为梯形，实现响应式的形状调整。

通过以上示例可以看出，clip-path 属性在网页设计中具有广泛的应用场景，可以为页面增添独特的视觉效果和交互性。

clip-path 之 insert

clip-path 属性中的 inset() 函数用于创建一个矩形剪裁区域。该函数可以指定从元素的各个边缘向内缩进的距离来定义剪裁区域。以下是关于 inset() 函数的详细用法实例：

基本语法

clip-path: inset(<top> <right> <bottom> <left> round <border-radius>);

<top>、<right>、<bottom>、<left>：分别指定从元素的上、右、下、左边缘向内缩进的距离，可以使用长度值（如 px、em 等）或百分比。
round <border-radius>：可选参数，用于指定剪裁区域的圆角半径，可以是一个值（四个角都使用相同的圆角半径），也可以是四个值分别指定四个角的圆角半径。

实例

1. 简单的矩形剪裁

代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.box {width: 200px;height: 200px;background-color: lightblue;clip-path: inset(20px);}</style>
</head><body><div class="box"></div>
</body></html>

代码解释：clip-path: inset(20px); 表示从元素的上、右、下、左四个边缘都向内缩进 20px，形成一个矩形的剪裁区域。

2. 不同边不同缩进的剪裁

代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.box {width: 200px;height: 200px;background-color: lightgreen;clip-path: inset(10px 20px 30px 40px);}</style>
</head><body><div class="box"></div>
</body></html>

代码解释：clip-path: inset(10px 20px 30px 40px); 分别指定了从元素的上边缘向内缩进 10px，右边缘向内缩进 20px，下边缘向内缩进 30px，左边缘向内缩进 40px，从而形成一个不规则的矩形剪裁区域。

3. 带圆角的矩形剪裁

代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.box {width: 200px;height: 200px;background-color: lightcoral;clip-path: inset(20px round 10px);}</style>
</head><body><div class="box"></div>
</body></html>

代码解释：clip-path: inset(20px round 10px); 表示从元素的四个边缘都向内缩进 20px，并且剪裁区域的四个角都使用 10px 的圆角半径。

4. 使用百分比进行剪裁

代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.box {width: 200px;height: 200px;background-color: lightyellow;clip-path: inset(10% 20%);}</style>
</head><body><div class="box"></div>
</body></html>