Home >Web Front-end >HTML Tutorial >认识CSS属性之clip-path_html/css_WEB-ITnose

认识CSS属性之clip-path_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:15:051106browse

Web 页面以长方形为主,相比之下,平面媒体在形状方面更具多样性。造成这种差异的原因之一就是,在 web 页面开发中缺少像平面媒体中那样合适的工具。

本文会带你认识 clip-path 属性,这个属性使你能够隐藏元素的某部分,可见区域由设置的参数值所控制。我们先学习基本概念,而后介绍 clip-path 语法,最后来看下更高深的概念。

基本概念

Clipping (裁剪)就是从某物上修剪下一块。在前端中,clipping 就是一种整体或部分地隐藏页面元素的操作。关于 clipping,本文还会提及其它两个概念:clipping path(剪裁路径)clipping region(剪裁区域)

Clipping path 是用来裁剪元素的路径,可以标记出 clipping region。clipping path 可以是基础形状或者是复杂的多边路径。而 clipping path 围起来的区域就是 clipping region 了。

浏览器会裁剪掉 clipping region 以外的区域,不仅是背景及其它类似的内容,也包括 border、text-shadow 等。更赞的是,浏览器不会捕获元素 clipping region 以外的 hover、click 等事件。

即使如今一些特定元素不受长方形限制,但实际上元素周围的内容还是会认为元素是原始形状(长方形)的,并按此进行文档流的布局。要想使周围元素根据元素裁剪后的形状进行布局,可以使用 shape-outside 属性。这个属性的详细信息可以移步 这篇 SitePoint 教程 。

注意,请不要将这个属性与 clip 属性 混淆。一般情况下请避免使用 clip 属性,因为它受诸多限制并且只支持长方形裁剪。

语法及使用

使用这个属性的正确语法如下:

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

上述属性值包括:

clip-source 可以是内、外部的 SVG 元素的 URL 引用。

basic-shape 可以是 CSS Shapes 说明 中定义的基础形状函数。

geometry-box 是可选的参数。此参数和 basic-shape 函数一起使用时,可以为 basic-shape 的裁剪工作提供参考盒子。如果 geometry-box 由自身指定,那么它会使用指定盒子的形状作为裁剪的路径,包括任何(由 border-radius 属性提供的)角的形状。我们稍后会详细说明。

现在来看看下面使用基础形状函数的 CSS 代码:

img {  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);}

这段代码会将所有的图片裁剪为菱形。但是为什么图片会被裁剪为菱形而不是梯形或平行四边形呢?这取决于函数中的顶点值。下图说明了生成多边形裁剪路径的规则:

多边形裁剪路径图

 

每个点的第一个坐标值决定了它在 x 轴上的位置,第二个坐标值指定了它在 y 轴的位置,所有点是顺时针绘制的。比如菱形最右边的点,它位于 y 轴下方一半处,所以它的 y 坐标是 50%。同时这个点位于 x 轴的最右侧,所以它的 x 坐标是 100%。其它点的坐标同理可得。

利用 geometry-box 裁剪元素

当裁剪 HTML 元素时,geometry-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 的左上角,所以 clip-path 的定位会根据此点进行计算。

裁剪 SVG 元素的情况下,geometry-box 可以是 fill-box、stroke-box 和 view-box。view-box 值在没有指定的情况下,默认采用最近的 SVG 视口作为参考盒子。

clip-path 的使用

这个属性可以用来做一些有趣的事。首先,它可以改善文本内容。让我们来看一下下面的图片,标题的背景和第二段都使用了 clip-path 属性:

clip-path 示例

使用渐变或其它类似技术可以很容易地实现第一个背景。但是没有 clip-path 的帮助,生成第二个背景就没那么容易了。注意,消息框样式背景底部的线不是水平的,而有一点倾斜。使用 clip-path 实现这个效果只需一行简单的 CSS 代码:

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

背景有 7 个顶点,这在多边形的 clip-path 中有所体现。也许你会问我是怎样得出这些坐标的。这个问题我会留给读者们解决,这样可以帮助你们更好地理解概念。打开下面的 CodePen 可以看到实现代码:

你也可以用这个属性将图片裁剪成不同的形状,并加点 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 还可以做更多的事——你可以做出奇形怪状的按钮,或给导航菜单添加好玩的 hover 效果,只有想不到,没有做不到!

添加动画

这个属性也可以与动画相结合。但是必须记住,最后形状的顶点数必须和初始形状的顶点数相同。这很重要,否则浏览器会不知道在哪添加多余的顶点(或是从哪移除顶点)。如下 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 以上的版本,激活 Firefox 的 layout.css.clip-path-shapes.enabled 选项就可以支持这个属性了。

Chrome、Safari 和 Opera 需要使用 -webkit- 前缀支持此属性。不幸的是,它们还不支持外部的 SVG 形状。更多浏览器支持性信息可以访问 Can I Use 。

总结

本文介绍了有关 clip-path 的基本内容,可以帮助你入门。学习使用这个属性并不会花费太多的时间,但是创造性的使用就需要多多练习了。当浏览器广泛支持此属性时,你就可以使用 clip-path 制作出酷炫的效果了。

此外还有两款工具值得介绍——Bennett Feely 的 clippy 和 CSS Plant 的 clip path 生成器 。它们可以为你创造复杂的多边形路径带来方便。

你用clip-path做出过什么炫酷的作品吗?请在留言中提供链接。

打赏支持我翻译更多好文章,谢谢!

打赏译者

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

关于作者:古鲁伊

立志做一名有格调的程序媛 个人主页 · 我的文章 · 11

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn