【CSS3】clip-path属性深入理解与使用
clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。
clip-path的属性值可以是以下几种:
1.inset; 将元素剪裁为一个矩形,
定义:clip-path: inset(<距离元素上面的距离>,<距离元素右面的距离> ,<距离元素下面的距离>,<距离元素左面的距离>,<圆角边框> ),括号内的值类似于margin、padding值的写法,可以写一个值,也可以写多个值。
使用:clip-path: inset(2px 2px 20px 20px round 10px);
效果:
代码:
1 2 3 4 5 6 7 8 9 10 | .divTwo{ margin: 50px; width: 80px; height: 80px; background-color: red; border: 1px solid #000; clip-path: inset(2px 2px 20px 20px round 10px); } < div class="divTwo"></ div > |
2. circle;将元素剪裁成一个圆
定义:clip-path: circle(圆的半径 at 圆心)
使用:clip-path: circle(40px at 50% 50%)
效果:
3. ellipse;将元素剪裁成一个椭圆
定义:clip-path: ellipse(圆的水平半径 圆的垂直半径 at 圆心)
使用:clip-path: ellipse(20px 40px at 50% 50%)
效果:
4. polygon;将元素剪裁成一个多边形,这里其实就是描点,多点连线,最少三个点,以距离左上角的长度为单位,跟canvas画布很像,下面以三角形为例
定义:clip-path: polygon(<距离左上角的X轴长度 距离左上角Y轴的长度>,<距离左上角的X轴长度 距离左上角Y轴的长度>,<距离左上角的X轴长度 距离左上角Y轴的长度>)
使用:clip-path: polygon(40px 0px, 0px 80px, 80px 80px);
效果:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 内存占用高分析
· .NET Core GC计划阶段(plan_phase)底层原理浅谈
· .NET开发智能桌面机器人:用.NET IoT库编写驱动控制两个屏幕
· 用纯.NET开发并制作一个智能桌面机器人:从.NET IoT入门开始
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· 20250116 支付宝出现重大事故 有感
· 一个基于 Roslyn 和 AvalonEdit 的跨平台 C# 编辑器
· 2025 最佳免费商用文本转语音模型: Kokoro TTS
· 海康工业相机的应用部署不是简简单单!?
· 使用 pdf.js 通过文件流方式加载pdf文件