目录
基础部分
语法和使用
使用 geometry-box值裁剪元素
使用 clip-path
增加动画
浏览器支持
结论
首页 web前端 html教程 [CSS] Introducing the CSS clip-path Property(译)_html/css_WEB-ITnose

[CSS] Introducing the CSS clip-path Property(译)_html/css_WEB-ITnose

Jun 24, 2016 am 11:15 AM

原文地址:https://www.sitepoint.com/introducing-css-clip-path-property/

网页主要是矩形分布的。另一方面,平面媒体则倾向于更多不同的形状。造成这种差异的原因是因为缺少合适的工具去实现我们平面媒体中的内容。

这个教程会介绍 clip-path这个属性,允许你部分展示元素。该元素的可见区域是由你提供的值决定的。我们先从基本的开始,然后再介绍语法和跟高级的概念。

基础部分

裁剪就是从某样东西修剪一块。在我们的例子中,它是一个操作,允许我们完全或者部分隐藏网页上的元素。另外两个在文章中用到的和裁剪相关的概念是 clipping path和 clipping region。

Clipping path 是我们用来裁剪元素的路径,它标记了我们的裁剪区域。它可以是个简单的形状也可以是一个复杂的多边形。裁剪区域即裁剪路径闭合后所包含的全部区域。

裁剪区域外的元素都由浏览器来裁剪。这些元素不仅仅包括背景和内容,也包括边框和文字阴影以及其他的。此外,浏览器不会捕获因 hover或者 click产生的在元素裁剪区域外的事件。

尽管我们的特定元素是非矩形的,但是在这个特定元素周围的元素还是保持在特定元素为初始形状的元素流位置。要使周围的元素流根据裁剪元素的形状排列,你需要使用 shape-outside属性。你可以参考 SitePoint tutorial的详细介绍。

同时,请注意不要把这个属性和已经废弃的的 属性 clip 混淆, clip使用上非常严格并且只支持裁剪为矩形。

语法和使用

该属性正确的语法应该如下

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none 
登录后复制

上面的属性值具体含义

  • clip-source会通过 URL 引用内部的活着外部 SVG 元素。

  • basic-shape接受CSS Shapes specification中定义的基本形状函数。

  • geometry-box是一个可选属性,当你在使用基本形状函数的时候使用这个属性,他表现的就像一个通过 basic-shape进行裁剪的reference box。如果 geometry-box单独使用,那么他会使用指定元素的形状,包括圆角形状(通过 border-radius属性设置)。我们将会展开讨论这个属性。

现在,考虑下面使用了基本形状函数的CSS代码

img {  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);} 
登录后复制

它会把图像剪辑为菱形。但是为什么这些图像会被剪辑为菱形而不是梯形或者平行四边形呢?这取决于你设置值的顶点。接下来的图像解释了当你裁剪多边形时的常见配置。

每个点上的第一个坐标决定了它在x轴上的位置。同样的,每个点上的第二个坐标决定了y轴的位置。每个点都按顺时间方向描绘。考虑我们菱形最右边的点。它位于y轴的一半所以它的y坐标是50%。同样的它最右边的点位于x轴上,所以他的坐标点是100%。其它点也可以根据此例子判断出坐标点。

使用 geometry-box值裁剪元素

当你裁剪一个HTML元素的时候, geometry-box(或者reference box)值可以是下列元素之一 – margin-box, border-box, padding-box或者 content-box。 geometry-box值的使用方式应该像下面一样

.clip-me {  clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box;  margin: 10%;}: 
登录后复制

在上面的案例中,我们元素中的 margin-box将被用为参考并决定裁剪点的实际坐标。点 (10%, 10%)在我们的 margin-box中位于左上角因此我们的裁剪路径将会定位于相关的点。

在 SVG 元素的情况下,它可能是 fill-box, stroke-box和 view-box。如果没有 view-box被指定的话, view-box这个值会被用于最接近 SVG 视图窗口的引用。

使用 clip-path

这个属性有很多有趣的用途。首先,它可以改善文本内容区域。看看下面的图片。标题和第二个段落的背景都是通过 clip-path属性创建的。

通过 gradients 和其他类似的技术你可以很容易的创建出第一个背景。但是,没有 clip-path帮助的情况下创建第二个背景图会很困难。注意那张像信息图标的背景图底部的线并不是完全水平的,它有点倾斜。使用 clip-path的话你可以通过一行 CSS 代码就能实现这个效果:

.p-msg {  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 85%, 75% 100%, 50% 80%, 0% 75%);} 
登录后复制

背景有七个顶点并且一一反应在 polygon’s 的 clip-path上。你问我是怎么想出这些坐标的?我会让你自己去尝试,这样做会帮助你对概念有一个更透彻的理解。通过以下这个练习来尝试吧!

通过这个属性你也可以把图片裁剪为不同的形状。然后在CSS的帮助下把他们组合为一个很酷的形状。你相册中的缩略图可以不再以矩形的方式存在并且用户图像也可以设置为任何你想要的形状。在这个教程中,我们会把图片展示为菱形。因为所有的图片都有着菱形的基础所以他们会用到相同的 clip-path值。下面是最右边图片的 CSS 代码

.right {  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);  position: relative;  top: -352px;  left: 256px;} 
登录后复制

下面就是一个图片使用 clip-path的例子

通过 clip-path你还能做到很多东西-你可以创建任何形状的按钮或者给你的菜单增加漂亮的悬浮效果。没有想不到只有做不到!

增加动画

这个属性也可以添加动画效果。唯一需要记住的是图片初始形状和裁剪形状的顶点数必须相同。这是有原因的,否则浏览器不知道在哪里添加额外的顶点(或者删除它)。下面是一个关于梯形动画的 CSS 代码

@keyframes polygons {   25% {     clip-path: polygon(20% 0%, 100% 38%, 70% 90%, 0% 100%);   }   50% {     clip-path: polygon(0 46%, 100% 15%, 55% 74%, 0 100%);   }   70% {     clip-path: polygon(100% 38%, 100% 38%, 66% 100%, 0 53%);   } } 
登录后复制

浏览器支持

这个属性不被 IE 和 Edge 支持。Firefox 只部支持 clip-path(只支持 url() 语法)。但是从版本号 47 之后,通过设置 layout.css.clip-path-shapes.enabled为 enabled,Firefox 也支持这个属性。

Chrome, Safari and Opera 需要添加 prefix-webkit-前缀才能正确生效。不幸的是,它们也不支持外部 SVGs 引用的形状。你可以在 Can I Use 上查看浏览器的支持情况。

结论

本教程介绍了基本的 clip-path帮助你了解它。虽然并没有花费很多时间去学习如何使用这个属性,想要创造性的使用它还需要足够的联系。等到浏览器能够很好支持它的时候,你准备好使用 clip-path创造出令人惊艳的效果了吗?

我还想介绍两个工具 – Bennett Feely 开发的 clippy和 CSS Plant 开发的 clip path generator。这些工具方便你创建复杂的多边形路径。

如果你也使用 clip-path创建了精彩的东西,欢迎你在评论中留言。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? 公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

如何高效地在网页中为PNG图片添加描边效果? 如何高效地在网页中为PNG图片添加描边效果? Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

HTML5中跨浏览器兼容性的最佳实践是什么? HTML5中跨浏览器兼容性的最佳实践是什么? Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

&lt; datalist&gt;的目的是什么。 元素? &lt; datalist&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:33 PM

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

&lt; meter&gt;的目的是什么。 元素? &lt; meter&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:35 PM

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

&gt; gt;的目的是什么 元素? &gt; gt;的目的是什么 元素? Mar 21, 2025 pm 12:34 PM

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

我如何使用html5&lt; time&gt; 元素以语义表示日期和时间? 我如何使用html5&lt; time&gt; 元素以语义表示日期和时间? Mar 12, 2025 pm 04:05 PM

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

See all articles