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

CSS clip-path 属性的使用

news 2025/11/14 8:44:12

今天记录一个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

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/10/31 0:43:35

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2025/11/12 18:08:16

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/11/9 22:09:54

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2025/11/9 4:07:18

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

编程新知 2025/11/12 20:52:54

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2025/11/13 13:42:14

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/11/12 6:44:20

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/11/12 8:20:18