深入理解与应用CSS clip-path 属性
clip-path
clip-path是什么
clip-path是一个CSS属性，允许开发者创建一个剪切区域，从而决定元素的哪些部分可见，哪些部分会被隐藏。通过定义这个剪切路径（clipping path），您可以创造出非矩形的裁剪形状，使元素内容按特定的几何形状展示。
clip-path 的工作原理
clip-path 属性通过定义裁剪路径来确定元素的可视区域。这意味着，你可以指定一个形状或路径，只有位于这个形状或路径内的部分才会被显示出来，其余部分则会被裁剪掉。这种裁剪可以是简单的几何形状，如圆形、椭圆形或多边形，也可以是复杂的 SVG 路径。
裁切示例
<!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>
.box {
width: 200px;
height: 200px;
text-align: center;
background-color: #888;
}
img {
width: 200px;
}
.item {
margin-right: 10px;
}
.text {
font-size: 14px;
color: #666;
}
.clip-path1 {
clip-path: inset(20px);
}
.clip-path2 {
clip-path: inset(0rem 0rem 0rem 1rem);
}
.clip-path3 {
clip-path: inset(0% 50px 0% 50px round 50%);
}
.clip-path4 {
clip-path: inset(1rem 0rem 0rem 1rem round 0rem 2rem 5rem 0rem);
}
.flex {
display: flex;
}
.hide {
display: none;
}
.circle1 {
clip-path: circle(50% at 50% 50%);
}
.circle2 {
clip-path: circle(20% at 50% 50%);
}
.circle3 {
clip-path: circle(50% at 0% 0%);
}
.element:hover {
clip-path: circle(75% at 50% 50%);
transition: clip-path 0.5s ease;
opacity: 0.7; /* 当鼠标悬停时，图片透明度变为0.7 */
transform: scale(1.1); /* 或放大图片 */
cursor: pointer; /* 改变鼠标指针样式为手型 */
}
.ellipse1 {
clip-path: ellipse(20% 50% at 50% 50%);
}
.polygon1 {
clip-path: polygon(0 0, 50% 20%, 100% 0, 100% 100%, 0 100%);
}
.shape {
width: 200px;
height: 200px;
background-color: red;
/* transition: clip-path 1s ease-in-out; */
}
.shape:hover {
/* clip-path: circle(50% at 50% 50%); */
}
/* 动画实现从方形到圆形的变化 */
@keyframes shape-transform {
0% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
100% {
clip-path: circle(50% at 50% 50%);
}
}
/* 如果你想在悬停时使用动画而不是直接转换，取消上面:hover的直接样式，改为下面这一行 */
.shape:hover { animation: shape-transform 1s forwards; }
</style>
</style>
</head>
<body>
<p>原始图</p>
<div class="box">
<img
src="https://jtcospublic.ciccten.com/config-server/1702366048109860837/public.png"
alt=""
class="element"
/>
</div>
<hr />
<!-- inset内嵌 -->
<div class="flex">
<div class="item">
<p class="text">clip-path: inset(20px);</p>
<div class="box">
<img
src="https://jtcospublic.ciccten.com/config-server/1702366048109860837/public.png"
alt=""
class="clip-path"
/>
</div>
</div>
<div class="item">
<p class="text">clip-path: inset(0rem 0rem 0rem 1rem);</p>
<div class="box">
<img
src="https://jtcospublic.ciccten.com/config-server/1702366048109860837/public.png"
alt=""
class="clip-path2"
/>
</div>
</div>
<div class="item">
<p class="text">clip-path: inset(0% 50px 0% 50px round 50%);</p>
<div class="box">
<img
src="https://jtcospublic.ciccten.com/config-server/1702366048109860837/public.png"
alt=""
class="clip-path3"
/>
</div>
</div>
<div class="item">
<p class="text">
clip-path: inset(1rem 0rem 0rem 1rem round 0rem 2rem 5rem 0rem);
</p>
<div class="box">
<img
src="https://jtcospublic.ciccten.com/config-server/1702366048109860837/public.png"
alt=""
class="clip-path4"
/>
</div>
</div>
</div>
<hr />
<!-- circle圆形 -->
<div class="flex">
<div class="item">
<p class="text">circle(50% at 50% 50%)</p>
<div class="box">
<img
src="https://jtcospublic.ciccten.com/config-server/1702366048109860837/public.png"
alt=""
class="circle1"
/>
</div>
</div>
<div class="item">
<p class="text">circle(20% at 50% 50%)</p>
<div class="box">
<img
src="https://jtcospublic.ciccten.com/config-server/1702366048109860837/public.png"
alt=""
class="circle2"
/>
</div>
</div>
<div class="item">
<p class="text">circle(50% at 0% 0%)</p>
<div class="box">
<img
src="https://jtcospublic.ciccten.com/config-server/1702366048109860837/public.png"
alt=""
class="circle3"
/>
</div>
</div>
</div>
<!-- ellipse 椭圆 -->
<div class="flex">
<div class="item">
<p class="text">ellipse(20% 50% at 50% 50%)</p>
<div class="box">
<img
src="https://jtcospublic.ciccten.com/config-server/1702366048109860837/public.png"
alt=""
class="ellipse1"
/>
</div>
</div>
</div>
<hr />
<!-- 多边形 (polygon) -->
<div class="flex">
<div class="item">
<p class="text">polygon(0 0, 50% 20%, 100% 0, 100% 100%, 0 100%)</p>
<div class="box">
<img
src="https://jtcospublic.ciccten.com/config-server/1702366048109860837/public.png"
alt=""
class="polygon1"
/>
</div>
</div>
</div>
<div class="shape hide"></div>
</body>
</html>
支持的基本形状
内嵌 (inset)
这创建了一个内嵌的剪裁区域，其中的四个值分别对应上、右、下、左的剪裁量。
参数：
inset( top right bottom left round <border-radius> )
例如参数最多的设置写法：
.clip-path4 {
clip-path: inset(1rem 0rem 0rem 1rem round 0rem 2rem 5rem 0rem);
}
圆形 (circle)
这将创建一个圆形剪裁区域，其中50%是圆的半径，at 50% 50%指定了圆心的位置（相对于元素的宽高）。
参数：clip-path: circle(radius at x-axis y-axis);
第一个参数是必需的，表示圆形裁剪区域的半径。
第二个参数是可选的，用于指定圆形裁剪区域的圆心位置。如果省略这个参数，默认圆心位于元素的中心
.circle2 {
clip-path: circle(20% at 50% 50%);
}
椭圆 (ellipse)
这里创建了一个椭圆形剪裁区域，其中第一个值和第二个值分别是椭圆的水平半径和垂直半径，at 50% 50%指定了椭圆中心的位置。
参数：clip-path: ellipse(rx ry at x-axis y-axis);
第一个和第二个参数是必需的，分别表示椭圆的水平半径（X轴半径）和垂直半径（Y轴半径）。
.ellipse1 {
clip-path: ellipse(20% 50% at 50% 50%);
}
多边形 (polygon)
函数用于创建一个任意多边形裁剪区域，它接受一系列坐标对作为参数，每个坐标对代表多边形的一个顶点。
参数：clip-path: polygon(x1 y1, x2 y2, ..., xn yn);
.polygon1 {
clip-path: polygon(0 0, 50% 20%, 100% 0, 100% 100%, 0 100%);
}
实践示例
投顾的图片很大(为什么投顾头像很大，有其他展示需求，想复用同一个图片)，但是仅需要裁切展示上半部分。，塞进背景后面的小黄圈里面。做法是使用clip-path属性来裁切图片，仅展示想要展示的那部分。简略代码如下：
<!-- 投顾头像 -->
<div class="consult-icon-image" @click="linkIC">
<img :src="consultor.img" />
</div>
<style>
.consult-icon-image {
position: relative;
top: 2px;
display: inline-block;
width: 60px !important;
height: 60px !important;
border-radius: 50%;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
background: linear-gradient(137.97deg, #fff3ea 0%, #f5b39b 120.86%);
border: 2px solid #f9e2c7;
box-sizing: border-box;
vertical-align: top;
img {
// 需要放大投顾头像
clip-path: inset(0 0.6rem 1.3rem 0.6rem round 100% 100% 90% 90%);
position: absolute;
width: 150%;
top: -34%;
left: 50%;
transform: rotateY(-180deg) translateX(50%);
}
}
</style>
优势与局限性
- 设计自由度：极大地提高了网页设计的灵活性，摆脱了传统的矩形框架约束。
- 性能优化：相比于直接使用图片遮罩，
clip-path的渲染效率更高，减轻服务器负担，提高页面加载速度。 - 响应式设计：结合CSS媒体查询，可以轻松实现不同屏幕尺寸下的响应式裁剪效果。
- 复用性与易维护性：尤其是当配合SVG路径引用时，裁剪路径可以独立管理，便于复用和修改。
深入理解与应用CSS clip-path 属性的更多相关文章
- css clip样式 属性功能及作用
clip clip 在学前端的小伙伴前,估计是很少用到的,代码中也是很少看见的,但是,样式中有这样的代码,下面让我们来讲讲他吧! 这个我也做了很久的开发没碰到过这个属性,知道我在一个项目中,有一个功能 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- 理解与应用css中的display属性
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
- 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...
- CSS中box-sizing属性的理解与部分用法
今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...
- CSS clip:rect矩形剪裁功能及一些应用介绍
CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...
- CSS的常用属性
刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好 ...
- css常用样式属性详细介绍
对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...
- CSS样式常用属性整理
web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...
- CSS Counters 计数属性
CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...
随机推荐
- 基于.Net Core3.1 MVC + EF Core的项目（一）框架的初步搭建
项目暂时分为六大块,结构如图所示 代码地址是 https://github.com/hudean/VacantCloud- 里面有许多没有完成,不过一些大致的内容都写的差不多了,权限认证依赖注入 ...
- windbg-windows调试工具来抓端游crash dump
windbg下载有两种方式: Install WinDbg - Windows drivers | Microsoft Learn 从微软应用商店下载 dump上的windows的局部变量解析部分进行 ...
- 【二】Latex入门使用、常见指令
参考链接:https://blog.csdn.net/cocoonyang/article/details/78036326 \documentclass[12pt, a4paper]{article ...
- Flask 框架：运用SocketIO实现WebSSH
Flask 框架中如果想要实现WebSocket功能有许多种方式,运用SocketIO库来实现无疑是最简单的一种方式,Flask中封装了一个flask_socketio库该库可以直接通过pip仓库安装 ...
- 手撕B树 | 二三查找树，B+树B*树你都会了吗？ | 超详细的数据结构保姆级别实现
说在前面 今天给大家带来B树系列数据结构的讲解! 博主为了这篇博客,做了很多准备,试了很多画图软件,就是为了让大家看得明白!希望大家不要吝啬一键三连啊!! 前言 那么这里博主先安利一下一些干货满满的专 ...
- ESP8266的AT指令模块程序
最新代码可点击下载:ESP8266 模块代码 和以下代码实现方式不一致,更加自由可控 本段代码只是测试了esp8266作为服务器端使用,没有测试作为客户端使用. 没有超长延时等待或死循环等待AT指令反 ...
- https、UDP的加密原理，其它传输层的同理
总结: 1.若应用需要使用http协议,那么就直接使用 https + 购买证书的方式. 2.若项目需要使用udp协议(浏览器不支持udp,所以只能是客户端软件包含APP),那么就需要将公钥内置在AP ...
- 安装Electron时卡在install.js不动的解决方案
问题来源,发现即使 源切换成淘宝的之后,安装 electron的时候还是慢死,郁闷,后来百度才发现,原来,还需要设置一个地方!!! 经过试验,果然快了 爽.... 之前在安装Electron的时候,经 ...
- .NET 云原生架构师训练营（模块二 基础巩固 配置）--学习笔记
2.2.3 核心模块--配置 IConfiguration Options ASP.NET Core 中的配置:https://docs.microsoft.com/zh-cn/aspnet/core ...
- Linux Shell获取指定日期 N 天/月/年前(后)的日期
我们有时候在写批处理 Shell 脚本时,可能需要获取指定日期前(后) N 天/月/年的日期,这里的 N 可以是 1 天/月/年.2 天/月/年.3 天/月/年等等.方法其实很简单,这里做一个简单记录 ...