当前位置： 首页 > news >正文

CSS clip-path 属性的使用

news 2026/1/11 16:18:28

今天记录一个css属性clip-path，首先介绍下这个属性。

clip-path 是CSS中的一个神奇属性，它能够让你像魔术师一样，对网页元素施展“裁剪魔法”——只展示元素的一部分，隐藏其余部分。想象一下，不用依赖图片编辑软件，直接在浏览器中就能实现元素的各种不规则形状裁剪。

clip-path 是CSS中一个强大的属性，它允许开发人员和设计师通过定义一个剪切区域来控制元素的可视部分，隐藏元素轮廓之外的内容。这一特性打破了传统矩形布局的限制，开启了创造非矩形、自定义形状设计的大门，对于提升网页和应用的视觉吸引力及交互体验具有重要意义。

作用：clip-path 决定一个元素的哪些部分应该被显示，哪些部分应当被隐藏。通过在元素上应用一个剪切路径，可以实现如圆形头像、不规则形状的按钮或图片遮罩等多种视觉效果。

适用性：适用于几乎任何HTML元素，包括图片、文本块、背景以及更复杂的布局组件。

语法：支持多种函数定义剪切区域，如 circle(), ellipse(), polygon(), inset() 或者引用SVG中的 <clipPath>。

浏览器兼容性：虽然现代浏览器广泛支持 clip-path，但早期版本和某些浏览器可能需要特定的前缀（如 -webkit-）来确保兼容性。检查最新的兼容性表格以确保广泛适用性。

动画与交互：结合CSS动画和过渡效果，clip-path 可以成为动态图形和交互设计的强大工具，实现元素形状的变化、加载动画或鼠标悬停效果等。总之，clip-path 是一个强大的设计工具，它不仅增强了网页的视觉层次，还推动了创新的用户界面设计，让网页元素的展示更加丰富多彩和引人入胜。

下面直接上代码，主要分为5种方法：

// 第一种圆形： circle()
/** 参数说明：  
半径: 50% 指定圆的半径。百分比值相对于引用盒子的高度和宽度中的较小者。也可以使用具体单位，如 100px。
位置: at 50% 50% 定义了圆心的位置。前一个值是水平位置，后一个是垂直位置。百分比值基于元素的宽度和高度。
*/
clip-path: circle(50% at 50% 50%);

// 第二种椭圆形：ellipse()
/** 参数说明： 水平半径: 50% 水平方向上的椭圆半径。垂直半径: 25% 垂直方向上的椭圆半径。位置: 同 circle() 函数，定义了椭圆中心的位置。
*/
clip-path: ellipse(50% 25% at 50% 50%);

// 第三种随机点位标点： polygon()
/** 参数说明：
顶点坐标: 列表形式给出多边形各顶点的坐标，每一对值代表一个点的水平位置和垂直位置。例如，25% 0% 表示第一个顶点位于元素宽度的25%处，垂直顶部。
*/
clip-path: polygon(25% 0%, 100% 25%, 75% 100%, 0% 75%);

// 第四种不规则矩形： inset()
/** 参数说明：
上右下左边距: 分别指定上、右、下、左边界的偏移量，可以是长度值或百分比。
round: 可选，用于设置圆角。后面跟一个或四个长度值，分别对应全部圆角或按顺序对应每个角的圆角半径。
*/
clip-path: inset(20px 40px 60px 80px round 15px);

<!-- 
第五种：SVG路径
这段SVG代码定义了一个包含内外两个矩形的剪切区域，外部大矩形剪出基本形状，内部小矩形进一步剪去中间部分。
然后在HTML元素中通过CSS引用这个SVG剪切路径ID。--><svg><defs><clipPath id="customClip"><path d="M10 10 H90 V90 H10 L10 10 Z M30 30 H70 V70 H30 Z"/></clipPath></defs>
</svg><div class="clipped-content" style="clip-path: url(#customClip);"></div>

响应式页面，适应不同的屏幕，保持良好的视觉效果

@media (max-width: 600px) {.element {clip-path: polygon(20% 0%, 100% 0%, 100% 80%, 0% 100%);}
}@media (min-width: 601px) and (max-width: 1024px) {.element {clip-path: polygon(10% 0%, 100% 0%, 100% 90%, 0% 100%);}
}/* 更大的屏幕尺寸 */
@media (min-width: 1025px) {.element {clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 0% 100%);}
}

下面是一些示例：

<!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>body {display: flex;}.circleBox {width: 100px;height: 150px;background-color: red;clip-path: circle(20% at 50% 50%);clip-path: circle(20% at center);}.ellipseBox {width: 100px;height: 150px;background-color: #0078d4;clip-path: ellipse(20% 25% at 50% 50%);}.polygonBox {width: 200px;height: 80px;background-color: #fad701;clip-path: polygon(10% 0, 80% 0, 60% 50%, 80% 100%, 10% 100%, 30% 50%);}.polygonBox:hover {clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%);}.insetBox {width: 100px;height: 150px;background-color: #46ca71;clip-path: inset(10px 30px 15px 20px round 5px);/* clip-path: inset(10px round 5px); */}.image-container {width: 200px;height: 200px;border-radius: 50%;}.circular-image {width: 100%;object-fit: contain;clip-path: circle(50% at center);}@keyframes clipPathAnimation {0% {clip-path: polygon(0% 0%, 0% 100%, 100% 100%);}50% {clip-path: circle(50% at 50% 50%);}100% {clip-path: polygon(100% 0%, 100% 100%, 0% 100%);}}.element {width: 100px;height: 100px;background-color: red;animation: clipPathAnimation 3s infinite;}</style>
</head><body><div class="circleBox">圆形</div><div class="ellipseBox">椭圆形</div><div class="polygonBox">随机点位形成图形</div><div class="insetBox">不规则矩形</div><div class="image-container"><img src="https://profile-avatar.csdnimg.cn/4c7665966b61478aadd11d0ffa4b15df_weixin_50559423.jpg!1"alt="Sample Image" class="circular-image"></div><div class="element"></div></body></html>

效果：
在这里插入图片描述

以上就是针对 clip-path 属性所作的介绍，多种用法等你去发现，欢迎点赞收藏！谢谢！

相关文章：

CSS clip-path 属性的使用

今天记录一个css属性clip-path&#xff0c;首先介绍下这个属性。 clip-path 是CSS中的一个神奇属性&#xff0c;它能够让你像魔术师一样&#xff0c;对网页元素施展“裁剪魔法”——只展示元素的一部分&#xff0c;隐藏其余部分。想象一下&#xff0c;不用依赖图片编辑软件&am…...

编程日记 2024/9/26 19:39:08

PHP 函数

PHP 函数 PHP&#xff08;超文本预处理器&#xff09;是一种广泛使用的开源服务器端脚本语言&#xff0c;特别适合于网页开发。在PHP中&#xff0c;函数是一段可重复使用的代码&#xff0c;用于执行特定任务。它们是PHP编程的核心组成部分&#xff0c;有助于模块化代码&#x…...

编程日记 2024/9/26 19:35:03

NCEloss与InfoNCEloss的区别

NCE Loss&#xff08;Noise Contrastive Estimation Loss&#xff09;和 InfoNCE Loss 是两种常用的损失函数&#xff0c;主要应用在对比学习和自监督学习任务中。它们的区别在于应用场景和具体实现细节。下面是对两者的详细比较&#xff1a; 1. NCE Loss&#xff08;Noise Co…...

编程日记 2024/9/26 19:34:02

高通Android 12 push framework.jar和service.jar

1、Android framework.jar和service.jar替换注意事项 2、单编 adb push service.jar脚本 如下 adb root adb disable-verity adb remountadb push services.jar system/framework adb push services.jar.prof system/framework adb push oat/arm64/services.art /system/fram…...

编程日记 2024/9/26 19:31:59

HTTPS证书配置

NGINX、SSl配置 修改conf目录下NGINX中的crt和key文件 单点配置SSL 需要的文件和配置信息 证书和keytool.exe(使用jdk1.8的)工具要在同一个目录下 gxszy.qhxzhny.top.pfx&#xff08;证书&#xff09; keystorePass.txt&#xff08;密码&#xff09; 使用JDK自带的keyto…...

编程日记 2024/9/26 19:29:55

Image matting入门

概念 matting就是扣图&#xff0c;本质是预测前景与背景&#xff0c;将前景扣出来。主要应用于影视行业&#xff0c;如拍电影绿幕扣图。和图像分割的区别在于多一个模糊地带&#xff0c;非01分类&#xff0c;变成了预测alpha通道。前景F&#xff0c;背景B&#xff0c;图像I可以…...

编程日记 2024/9/26 19:27:52

基于安全风险预测的自动驾驶自适应巡航控制优化

摘要 ：从周边车辆运动学状态参数和道路设施条件参数中提取场景特征指标和安全风险度量指标，采用极端梯度提升模型（XGboost ）和长短时记忆模型（ LSTM ）进行安全风险预测，由此提出基于安全风险预测的自动驾驶自适应巡航控制（ACC ）优化方法，并选取碰撞发生概率、速度平均…...

编程日记 2024/9/26 19:26:51

Docker Compose 搭建 Redis 哨兵集群模式搭建详解（1主2从+3哨兵）(包含主从复制的搭建) (保证一遍学会)

目录 哨兵的作用和工作原理 服务状态监控 选举新的 master 如何实现故障转移 搭建哨兵集群 哨兵的作用和工作原理 Redis 提供了哨兵 (Sentinel) 机制来实现主从集群的自动故障恢复。哨兵的结构和作用如下 监控&#xff1a;Sentinel 会不断检查你的 master 和 slave 是否按…...

编程日记 2024/9/26 19:25:41

Oracle 单机和集群环境部署教程

目录 一、Oracle 单机环境部署1. 环境准备2. 安装 Oracle Database2.1 下载 Oracle Database2.2 创建 Oracle 用户和组2.3 配置内核参数和系统限制2.4 解压和安装2.5 配置监听程序2.6 创建数据库 3. 单机部署注意事项 二、Oracle 集群环境部署 (Oracle RAC)1. 环境准备2. 安装 …...

编程日记 2024/9/26 19:24:40

springboot 整合酷狗获取MV视频最高画质（使用自己账户）

在此声明&#xff0c;本内容仅供个人学习、研究或娱乐之用&#xff0c;严禁任何形式的商业用途。若您发现本内容被用于商业目的&#xff0c;请立即删除&#xff0c;及时与小编联系&#xff0c;我们将删除原代码。 请根据上一篇文章使用该代码&#xff1a;SpringBoot 整合酷狗获…...

编程日记 2024/9/26 19:21:36

数字孪生平台，助力制造设备迈入超感知与智控新时代！

痛点剖析 当前&#xff0c;制造业面临系统分散导致的数据孤岛问题&#xff0c;严重阻碍了有效监管与统计分析&#xff1b;同时&#xff0c;设备多样化且兼容性不足&#xff0c;增加了管理难度&#xff1b;台账记录方式混乱&#xff0c;工单审批流程繁琐且效率低下&#xff1b;…...

编程日记 2024/9/26 19:16:31

音视频入门基础：AAC专题（10）——FFmpeg源码中计算AAC裸流每个packet的pts、dts、pts_time、dts_time的实现

音视频入门基础&#xff1a;AAC专题系列文章&#xff1a; 音视频入门基础&#xff1a;AAC专题&#xff08;1&#xff09;——AAC官方文档下载 音视频入门基础&#xff1a;AAC专题&#xff08;2&#xff09;——使用FFmpeg命令生成AAC裸流文件 音视频入门基础&#xff1a;AAC…...

编程日记 2024/9/26 19:14:28

pycirclize python包画circos环形图

pycirclize python包画circos环形图 很多小伙伴都有画环形图的需求&#xff0c;网上也有很多画环形图的教程&#xff0c;讲解circos软件和circlize R包的比较多&#xff0c;本文介绍一款python包:pyCirclize。适合喜欢python且希望更灵活作图的小伙伴。 pyCirclize包实际上也…...

编程日记 2024/9/26 19:13:27

Redis Sorted Set 跳表的实现原理和分析

跳表&#xff08;Skip List&#xff09;是一种随机化的数据结构&#xff0c;基于有序链表&#xff0c;通过在链表上增加多级索引来提高数据的查找效率。它是由 William Pugh 在 1990 年提出的。 为什么 Redis 中的 Sorted Set 使用跳跃表 Redis 的有序集合&#xff08;Sorted …...

编程日记 2024/9/26 19:11:24

新手教学系列——在MySQL分表中批量调整表结构的实践与优化

在当今的互联网业务中，随着数据量的不断增长，单个数据库的处理能力往往难以满足高并发、高性能的要求。因此，分库分表已经成为解决数据库扩展性问题的主流方案之一。然而，分表虽然能有效提升数据库的读写性能，但也带来了一个新的挑战：当业务需求变化时，需要对大量分表进…...

编程日记 2024/9/26 19:10:23

解决事务提交延迟问题：Spring中的事务绑定事件监听机制解析

目录 一、背景二、事务绑定事件介绍三、事务绑定事件原理四、结语 一、背景 实际工作中碰到一个场景&#xff0c;现存系统有10w张卡需要进行换卡&#xff0c;简单来说就是为用户生成一张新卡&#xff0c;批量换卡申请需要进行审核&#xff0c;审核通过后异步进行处理。 为什么…...

编程日记 2024/9/26 19:07:20

Python 异步编程的秘密武器：Asyncio

python编程中&#xff0c;异步编程是一个重要概念。它允许我们在等待某些操作&#xff08;如网络请求或文件读写&#xff09;时&#xff0c;不阻塞程序的其他部分运行。 在 Python 中&#xff0c;asyncio 是实现异步编程的强大工具。今天&#xff0c;我们将一同探索 asyncio 的…...

编程日记 2024/9/26 19:04:15

10年计算机考研408-计算机网络

【题33】下列选项中&#xff0c;不属于网络体系结构所描述的内容是&#xff08;&#xff09; A.网络的层次 B.每一层使用的协议 C.协议的内部实现细节 D.每一层必须完成的功能 解析&#xff1a; 本题考查的是网络体系结构相关的概念。 图1描述了网络的7层架构以及每一层所要完成…...

编程日记 2024/9/26 19:02:11

深信服校招面试总结

许久没有更新博客&#xff0c;这两个月里发生的事情有些多。最近稍微稳定下来了&#xff0c;应该可以重新开始吧。 背景 首先感觉自己的笔试做的还行&#xff0c;除了第三个编程题没做出来&#xff0c;其他的应该都做出来了。当时忘记并查集的路径压缩怎么写了&#xff0c;加上…...

编程日记 2024/9/26 19:00:08

【LeetCode热题100】模拟

这篇博客记录了模拟相关的题目&#xff0c;也就是按照题目的描述写代码&#xff0c;很锻炼代码实现能力&#xff0c;包括了替换所有的问号、Z字形变换、外观数列、数青蛙4道题。 class Solution { public:string modifyString(string s) {int n s.size();for(int i 0 ; i <…...

编程日记 2024/9/26 18:59:07

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/11/10 19:08:45

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

编程新知 2025/12/31 19:26:56

Linux 中如何提取压缩文件 ？

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

编程新知 2025/12/31 11:53:18

第7篇：中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

编程新知 2025/12/11 0:27:15

【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

编程新知 2026/1/9 20:36:50

Python常用模块：time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的： 快速搭建小型Web服务器以提供数据。 工具： 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask： 建议： 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装，避免频繁切换。 PyCharm Terminal 配置建议： 打开 Py…...

编程新知 2025/10/15 8:34:59

基于谷歌ADK的 智能产品推荐系统(2): 模块功能详解

在我的上一篇博客&#xff1a;基于谷歌ADK的 智能产品推荐系统(1): 功能简介-CSDN博客 中我们介绍了个性化购物 Agent 项目&#xff0c;该项目展示了一个强大的框架&#xff0c;旨在模拟和实现在线购物环境中的智能导购。它不仅仅是一个简单的聊天机器人&#xff0c;更是一个集…...

编程新知 2026/1/7 22:16:22

Shell 解释器​​ bash 和 dash 区别

bash 和 dash 都是 Unix/Linux 系统中的 ​​Shell 解释器​​&#xff0c;但它们在功能、语法和性能上有显著区别。以下是它们的详细对比&#xff1a; ​​1. 基本区别​​ ​​特性​​​​bash (Bourne-Again SHell)​​​​dash (Debian Almquist SHell)​​​​来源​​G…...

编程新知 2025/12/9 16:23:42

华为OD机考- 简单的自动曝光/平均像素

import java.util.Arrays; import java.util.Scanner;public class DemoTest4 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint[] arr Array…...

编程新知 2026/1/7 14:08:19

GC1808：高性能音频ADC的卓越之选

在音频处理领域&#xff0c;高质量的音频模数转换器&#xff08;ADC&#xff09;是实现精准音频数字化的关键。GC1808&#xff0c;一款96kHz、24bit立体声音频ADC&#xff0c;以其卓越的性能和高性价比脱颖而出&#xff0c;成为众多音频设备制造商的理想选择。 GC1808集成了64倍…...

编程新知 2026/1/8 1:27:24