您的位置:首页> 前端教程> CSS3教程
文章导航

CSS clip-path

2019-4-17 22:39| 作者: admin| 查看: 454| 评论: 1|来自: 蚂蚁部落

掌握此属性首先从其名称入手,这也是本站文章的常见风格。

clip-path由单词clip与path构成,clip翻译成汉语具有"剪切"的意思,path翻译成汉语具有"路径"的意思。

名副其实,此属性可以沿着指定的路径对元素或者图形进行裁切操作。

与此属性类似,clip属性也可以完成裁切操作,虽然当前主流浏览器都支持此属性,但已不推荐使用。

之所以clip属性不推荐使用,主要基于如下几点原因:

(1).可以被裁切的元素必须采用固定定位或者绝对定位。

(2).只能进行矩形裁切,裁切方式有限。

关于clip属性的具体用法可以参阅CSS3 clip属性一章节。

语法结构:

[CSS] 纯文本查看 复制代码
clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

属性值解析:

(1).clip-source:规定被裁剪的内部或者外部的SVG的<clipPath>元素的URL引用。

(2).basic-shape:常见的一些图形函数,属性可以将元素或者图形切割成对应的形状。

(3).geometry-box:可选,为basic-shape图形函数提供裁切参考盒子;如果省略,那么分为两种情况,如果是对普通的HTML元素的裁切,默认值是border-box,如果是对SVG图形的裁切,那么默认值是fill-box。

特别说明:裁切函数有后面几种,circle()、ellipse()、inset()和polygon()。

通过一个简单的图示对裁切裁切进行一下简单介绍:

a:3:{s:3:\"pic\";s:43:\"portal/201904/17/224032s8js5jl66z8djvyd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

图示简单说明如下:

(1).虚线表示裁切路径,将沿着这条路径对图片进行裁切。

(2).随着裁切的进行,路径必然闭合,路径中包围的地方将是要保留的区域。

clip属性虽然不被推荐使用,但是当前浏览器支持度非常不错,应该有不少朋友想了解两者区别。

字面与语法结构的区别不多介绍,两者主要区别在于裁切凡是,下面通过图示方式简单介绍一下两者的区别:

a:3:{s:3:\"pic\";s:43:\"portal/201904/17/224050ye627ub9upisiaxf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面是clip的裁切方式,白色区域被保留,也就是坐标重合的区域。

a:3:{s:3:\"pic\";s:43:\"portal/201904/17/224102surgaat22w2i2rvx.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面是clip-path裁切方式,白色区域被保留,很明显与clip不同。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg{
width:400px;
height:400px;
}
circle {
clip-path:url(#clipPath);
}
</style>
</head>
<body>
<svg>
<defs>
<clipPath id="clipPath">
<rect x="15" y="15" width="100" height="100"/>
</clipPath>
</defs>
<circle
cx="150" cy="150"
r="100"
fill="red"/>
<rect 
x="15" y="15"
width="100" height="100"
fill="blue"
fill-opacity="0.1"/>
</svg>                         
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/17/224136he19nnlc4ju9d71u.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面的代码引用当前页面的<clipPath>规定裁切效果。

我们也可以引用非当前页面的<clipPath>规定裁切效果,简单代码片段演示如下:

[CSS] 纯文本查看 复制代码
circle {
  clip-path:url(ant.svg#clipPath); 
}

需要特别注意的是,<clipPath>不但可以用于SVG元素,也可以用于普通HTML元素。

前面就是一个用于普通HTML元素的例子,用于SVG元素是同样的道理,不再演示。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:309px;
  height:99px;
  background-image:url(demo/CSS/img/mybg.png);
  clip-path:inset(0px 206px 66px 0px); 
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

上述代码演示了inset矩形裁切函数的用法,下面对上述代码进行一下分析。

代码使用如下背景图片,宽度为309像素,高度为99像素,平均分为九分。

a:3:{s:3:\"pic\";s:43:\"portal/201904/17/224224swpw1788e717g1z0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

inset()函数具有四个参数,用于确定裁切路径,顺序是top、right、bottom和left。

需要特别注意的是,函数的参数不能用逗号进行分割。

a:3:{s:3:\"pic\";s:43:\"portal/201904/17/224237ykjkkp5kk6d88w4j.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

所以上述代码最终会将背景图片中的"1"区域裁切出来。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:309px;
  height:99px;
  background-image:url(demo/CSS/img/mybg.png);
  clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/17/224313fogsp3zrqmargkm3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对上述代码分析如下:

(1).polygon()函数可以建立一个多边形裁切路径。

(2).每一个坐标点通过逗号分隔,参数值可以是数值也可以是百分比。

(3).用逗号分隔的每一坐标,第一个是x轴坐标,第二个是y轴坐标。

(4).顺序是采用上右下左的方式,非常简单,不再做过多的说明。

circle()和ellipse()函数分别进行圆形和椭圆形裁切操作,本文就不再进行代码实例演示。

非常简单,感性去的朋友可以自行做一下实例测试,下面是两个函数的语法结构:

[CSS] 纯文本查看 复制代码
/* 圆形 */
clip-path: circle(30px at 35px 35px);
/* 椭圆 */
clip-path: ellipse(65px 30px at 125px 40px);

简单说明如下:

(1).at前面的参数规定的是半径尺寸。

(2).椭圆具有两个半径,很容易理解,因为椭圆是扁状的。

(3).at后面规定的是圆心坐标。

geometry-box属性:

它可以为裁切函数规定裁切参考盒子,其实就是规定裁切所在的坐标系。

如果是针对普通的HTML元素进行裁切,那么可以规定如下几个值:

(1).margin-box

(2).border-box

(3).padding-box

(4).content-box图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/17/224354dtagatkal9ythgzg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过理论参数过于枯燥,也不够直观,下面看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:100px;
  height:50px;
  background-color:#ccc;
  border:10px solid red;
  clip-path:inset(0px 10px 10px 0px) border-box; 
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/17/224419s999ppt99tv94v99.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码分析如下:

(1).geometry-box属性值为border-box。

(2).也就是规定以边框的左上角为坐标系原点,水平边框外边缘为x轴,垂直边框外边缘为y轴。

简单图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/17/224429paeqrrq0zqudjmxe.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对于其他属性值都是同样的道理,只是坐标系的基准发生了变化而已。

如果裁切的是SVG图形,那么可能的属性值如下:

(1).fill-box:使用对像的边缘做为参考盒子。

(2).stroke-box:使用路径做为参考盒子

(3).view-box:如果没有指定viewBox,将使用最近的SVG视窗做为参考盒子,否则根据viewBox原点坐标和维度创建参考盒子。

SVG知识,本文不做介绍,具体可以参阅本站SVG教程板块的相关知识,原理与对普通元素的裁切大同小异。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

上一篇:CSS align-self下一篇:CSS @media 媒体查询
发表评论

最新评论

引用 414339997 2019-5-27 19:35
蚂蚁部落的写文章的绝对是前端大佬,理解的太透了。 哭了

查看全部评论(1)

返回顶部