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

CSS clip-path 属性的使用

news 文章来源：https://blog.csdn.net/weixin_50559423/article/details/142357810 2025/5/6 2:01:20

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

如何在Chrome最新浏览器中调用ActiveX控件？

小编最近登陆工商银行网上银行&#xff0c;发现工商银行的个人网银网页&#xff0c;由于使用了ActiveX安全控件&#xff0c;导致不能用高版本Chrome浏览器打开&#xff0c;目前只有使用IE或基于IE内核的浏览器才能正常登录网上银行&#xff0c;而IE已经彻底停止更新了&#xff…...

编程日记 2024/9/26 18:57:05

一款好用的远程连接工具：MobaXterm

在日常工作中&#xff0c;作为开发者或运维人员&#xff0c;你是否经常需要远程连接服务器进行调试和管理&#xff1f;传统的SSH工具常常不够灵活&#xff0c;操作繁琐&#xff0c;无法满足日益复杂的工作需求。而MobaXterm的出现&#xff0c;带来了远程连接工具的全新体验。它…...

编程日记 2024/9/26 18:56:04

Spring Boot使用配置方式整合MyBatis

文章目录 一、实战目标二、步骤概览1. 创建部门映射器接口2. 创建映射器配置文件3. 配置全局映射器4. 测试映射器接口 三、详细步骤1、创建部门映射器接口2、创建映射器配置文件3、配置全局映射器4、测试映射器接口 四、结语 一、实战目标 在本实战课程中&#xff0c;我们将学…...

编程日记 2024/9/26 18:55:03

HarmonyOS第一课-应用程序框架基础习题答案

声明&#xff1a;本题库为最新的HarmonyOS第一课的学习题库&#xff0c;仅供参考学习&#xff01; 一、判断题 1. 在基于Stage模型开发的应用项目中都存在一个app.json5配置文件、以及一个或多个module.json5配置文件。&#xff08;正确&#xff09; 正确(True) 错误(False) -…...

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

滚雪球学SpringCloud[10.2讲]：微服务项目的性能优化与调优

全文目录: 前言性能优化与调优概述性能优化的核心目标常见的性能瓶颈来源 性能瓶颈分析与调优策略1. 服务间通信优化优化策略&#xff1a; 2. 数据库优化优化策略&#xff1a; 3. 线程池优化优化策略&#xff1a; 4. 缓存优化优化策略&#xff1a; 常见问题的排查与解决1. 慢查…...

编程日记 2024/9/26 18:50:58

EasyExcel将数据库里面的数据生成excel文件

EasyExcel官方文档 1.在model模块导入依赖 <!-- 生成报表--> <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>4.0.3</version> </dependency> 2.修饰实体类 package…...

编程日记 2024/9/26 18:45:53

【YOLO学习】YOLOv1详解

文章目录 1. 概述2. 算法流程3. 网络结构4. 损失函数 1. 概述 1. YOLO 的全称是 You Only Look Once: Unified, Real-Time Object Detection。YOLOv1 的核心思想就是利用整张图作为网络的输入&#xff0c;直接在输出层回归 bounding box 的位置和 bounding box 所属的类别。简单…...

编程日记 2024/9/26 18:41:48

HarmonyOS应用开发(组件库)--组件模块化开发、工具包、设计模式（持续更新）

致力于&#xff0c;UI开发拿来即用&#xff0c;提高开发效率 常量格式枚举enum格式正则表达式...手机号校验...邮箱校验 文件判断文件是否存在 网络下载下载图片从沙箱中图片转为Base64格式从资源文件中读取图片转Base64 组件输入框...矩形输入框...输入框堆叠效果&#xff08;…...

编程日记 2024/9/26 18:40:47

python测试开发---前后端交互Axios

Axios 是一个基于 Promise 的 HTTP 客户端&#xff0c;常用于浏览器和 Node.js 中发送 HTTP 请求。它封装了 XMLHttpRequest 和 Node.js 的 http 模块&#xff0c;使得处理网络请求更加简单和直观&#xff0c;尤其适合处理异步请求。以下是 Axios 的基础概念和使用方法&#xf…...

编程日记 2024/9/26 18:39:45

删除视频最后几帧 剪切视频

删除视频最后几帧 剪切视频 remove_last.py import subprocess def remove_last_frame(input_file, output_file, frame_rate):command_duration [ffprobe,-v, error,-show_entries, formatduration,-of, defaultnoprint_wrappers1:nokey1,input_file]try:total_duration fl…...

编程日记 2024/9/26 18:37:42