css clip-path 简介
本帖最后由 马黑黑 于 2024-1-11 12:25 编辑 <br /><br /><style>.pa p { margin: 10px 0; }
.pa pre { padding: 10px; background: #eee; tab-size: 4; white-space: pre-wrap; word-wrap: break-word; }
.mama {
position: relative;
margin: 20px;
width: 400px;
height: 200px;
border: 1px solid gray;
}
.mama::before, .mama::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: pink;
clip-path: inset(0 round 20px);
}
.mama::after {
background: lightblue;
clip-path: inset(15px);
}
.mama:nth-of-type(2)::before {
clip-path: circle(80px at 25% 50%);
}
.mama:nth-of-type(2)::after {
clip-path: circle(100px);
}
.mama:nth-of-type(3)::before {
clip-path: ellipse(100px 60px at 30% 50%);
}
.mama:nth-of-type(3)::after {
clip-path: ellipse(60px 80px at 75% 50%);
}
.mama:nth-of-type(4)::before {
clip-path: polygon(0 50%,50% 0,100% 50%,50% 100%);
}
.mama:nth-of-type(4)::after {
clip-path: polygon(25% 25%,75% 25%,75% 75%,25% 75%);
}
.mama:nth-of-type(5)::before {
clip-path: path('m102.41522,53.42835c34.42664,-94.50406 169.31135,0 0,121.50522c-169.31135,-121.50522 -34.42664,-216.00929 0,-121.50522z');
}
.mama:nth-of-type(5)::after {
clip-path: path('m220.64504,98.88681l63.02483,0l19.47516,-63.02457l19.47517,63.02457l63.02482,0l-50.98807,38.95088l19.47617,63.02457l-50.98809,-38.95194l-50.98808,38.95194l19.47617,-63.02457l-50.98808,-38.95088z');
}
</style>
<div class="pa">
<p>CSS曾经存在 clip 剪裁属性，功能极弱，仅能对 absolute 和 fixed 定位的元素进行有限的裁剪操作，于是 clip 属性被废弃，小妹妹 clip-path 闪亮登场。本文就简单聊聊 clip-path，算是对我们在不同场景多次使用过的属性做一次小结。</p>
<p>裁缝在动剪子之前，就已胸有成“衣”，在衣服还是一块布料的时候心中早有了终端产品的样纸。clip-path 小姑凉也练就了这个本事：通过基本图形（basic-shape）模式对目标元素（布料）进行剪裁。下面逐一介绍各种基本图形模式——它们实际上就是CSS剪裁函数：</p>
<h2>一、inset（矩形）</h2>
<p>inset() 函数定义一个矩形，这个矩形就是裁剪之后最终呈现出来的样子。语法举例：</p>
<pre>clip-path: inset(10px 20px 30px 40px round 10px);</pre>
<p>这表示，元素的上边、右边、下边、左边分别裁掉10px、20px、30px、40px，并且，裁剪出来的成品圆角半径为10px。圆角半径必须由 round 关键词带出，圆角参数可选，意思是，是否设置 round 参数，依据的是是否需要圆角效果。另外需要注意的是，参数尺寸除使用像素单位外，还支持其他实体和百分比单位。</p>
<p>如果上右下左四个方向裁掉的尺寸一致，比如都是15px，上述语句可以写成：</p>
<pre>clip-path: inset(15px round 10px);</pre>
<p>如果不需要圆角，则写成：</p>
<pre>clip-path: inset(15px);</pre>
<p>实例：对 class="mama" 的 div 的两个伪元素进行操作，伪元素尺寸和宿主一致，粉红色伪元素裁掉0px并设置圆角半径10px，淡蓝色伪元素剪掉15px、不设置圆角：</p>
<pre>
<style>
.mama {
position: relative;
margin: 20px;
width: 400px;
height: 200px;
border: 1px solid gray;
}
.mama::before, .mama::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: pink;
clip-path: inset(0 round 20px);
}
.mama::after {
background: lightblue;
clip-path: inset(15px);
}
</style>
<div class="mama"></div>
</pre>
<div class="mama"></div>
<h2>二、circle（圆形）</h2>
<p>circle()函数用于定义圆形，亦即，裁出来的效果是个圆形。共两个参数，一个是剪裁成品的半径（必须），一个是圆心位置坐标（可选，默认是元素中心），由关键词 at 带出。语法举例如下：</p>
<pre>clip-path: circle(100px at 25% 50%);</pre>
<p>这表示，裁剪出来的圆半径为 100px，圆心在元素坐标系的 {25%,50%} 处。半径单位使用百分比时，参照元素的宽高尺寸用勾股定理计算实际尺寸。</p>
<p>下面给出的实例，mama的两个伪元素一个裁成80px半径、圆心在 {25%,50%} 处，另一个半径为100px、圆心位置缺省（元素的中心）：</p>
<pre>
.mama::after {
background: lightblue;
clip-path: inset(15px);
}
.mama:nth-of-type(2)::before {
clip-path: circle(80px at 25% 50%);
}
.mama:nth-of-type(2)::after {
clip-path: circle(100px);
}
</pre>
<div class="mama"></div>
<h2>三、ellipse（椭圆形）</h2>
<p>ellipse()函数用于定义椭圆形，就是，裁剪出来的效果是一个椭圆形。需要两个参数，一是椭圆的两个半径（必须），二是椭圆的位置（可选）。和对圆的操作大同小异。语法举例：</p>
<pre>clip-path: ellipse(100px 60px at 30% 50%);</pre>
<p>这意味着，椭圆的中心处在元素的 {30%,50%} 处，椭圆XY半径依次为 100px 60px。试看如下实例，我们仍然利用伪元素操刀，剪出两个椭圆：</p>
<pre>
.mama:nth-of-type(3)::before {
clip-path: ellipse(100px 60px at 30% 50%);
}
.mama:nth-of-type(3)::after {
clip-path: ellipse(60px 80px at 75% 50%);
}
</pre>
<div class="mama"></div>
<h2>四、polygon（多边形）</h2>
<p>polygon()函数用于定义一个多边形，亦即，操刀之后，得出的是个多边形效果。多边形至少需要三个边，用点坐标的方式定义每条边线段两端的位置，两个点坐标之间建议用逗号隔开；它会自闭合，回到原点时的点坐标可以省略。语法举例：</p>
<pre>clip-path: polygon(0 50%,50% 0,100% 50%,50% 100%);</pre>
<p>这表明我们剪出了一个菱形。下面给出的实例，第一个伪元素我们用上面的代码剪出一个菱形，第二个伪元素我们剪成一个小矩形：</p>
<pre>
.mama:nth-of-type(4)::before {
clip-path: polygon(0 50%,50% 0,100% 50%,50% 100%);
}
.mama:nth-of-type(4)::after {
clip-path: polygon(25% 25%,75% 25%,75% 75%,25% 75%);
}
</pre>
<div class="mama"></div>
<p>同样的，各点坐标值可以使用像素单位。</p>
<h2>五、path（路径）</h2>
<p>path()函数使用指定路径剪裁效果，参数就是规范的svg闭合路径。语法举例，注意路径放在括号里，路径字符串要用小角引号：</p>
<pre>clip-path: path('M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z');</pre>
<p>这将剪出一个心形效果。下面的实例，我们利用两个伪元素分别剪出一个心形和一个星形效果：</p>
<pre>
.mama:nth-of-type(5)::before {
clip-path: path('m102.41522,53.42835c34.42664,-94.50406 169.31135,0 0,121.50522c-169.31135,-121.50522 -34.42664,-216.00929 0,-121.50522z');
}
.mama:nth-of-type(5)::after {
clip-path: path('m220.64504,98.88681l63.02483,0l19.47516,-63.02457l19.47517,63.02457l63.02482,0l-50.98807,38.95088l19.47617,63.02457l-50.98809,-38.95194l-50.98808,38.95194l19.47617,-63.02457l-50.98808,-38.95088z');
}
</pre>
<div class="mama"></div>
<p>clip-path: path('...') 会被少量编辑器判为语法错误，但这个语句的确是mdn推荐的标准表达式。故此，如果报错，可以理解为是编辑器的语法检测库跟不上形势的发展。path('..') 其实是语法糖，它是 clip-source 引用的简化，clip-source 引用需要一个svg元素制作路径，然后通过路径的id对路径进行引用，有兴趣的朋友可以自行网补。</p>
</div>
马老师的高级难题，冬雨飘过{:4_187:} 醉美水芙蓉 发表于 2024-1-11 16:44
谢谢老师详细的介绍！
{:4_190:} 冬天的雨 发表于 2024-1-11 16:37
马老师的高级难题，冬雨飘过
{:4_203:} 这个讲解十分详尽，还有实例可以直接看到和比较，这个太好了{:4_199:} inset有时用polygon也可以代替，只是inset更简洁，而且可以设置圆角，这个圆角很少用到。下回要多用用，熟悉一下它。{:4_173:} path弄得好，几乎可以替代上面所有图形吧，这个很强大。 跟着学习一遍，真好，嘿嘿辛苦了{:4_199:} 拟人的语言来描述高深的黑科技，虽然吃瓜，但看着也觉得颇爽{:4_189:} 樵歌 发表于 2024-1-11 18:56
拟人的语言来描述高深的黑科技，虽然吃瓜，但看着也觉得颇爽
樵哥哥，一面吃瓜，一面学习就是我{:4_173:} 黑黑我感觉字太小一点，现在我电脑还原了尺寸，看这个字感觉有点累，电脑放大尺寸看帖子效果不好。 小辣椒 发表于 2024-1-11 20:42
黑黑我感觉字太小一点，现在我电脑还原了尺寸，看这个字感觉有点累，电脑放大尺寸看帖子效果不好。
下回我把字设大一点，我这里用的是默认字体大小 小辣椒 发表于 2024-1-11 20:40
樵哥哥，一面吃瓜，一面学习就是我
你到底还能学不少本事，我纯吃瓜的，而且挑大的吃{:4_189:} 樵歌 发表于 2024-1-11 20:59
你到底还能学不少本事，我纯吃瓜的，而且挑大的吃
{:4_172:}
笑S了，樵哥哥我们差不多的 马黑黑 发表于 2024-1-11 17:35
主要冬雨看不懂 冬天的雨 发表于 2024-1-11 22:14
主要冬雨看不懂
{:4_190:} 小辣椒 发表于 2024-1-11 21:04
笑S了，樵哥哥我们差不多的
你跟小冬雨都 班上成绩名列前矛的学霸，我纯吃瓜的{:4_189:} 樵歌 发表于 2024-1-12 18:39
你跟小冬雨都 班上成绩名列前矛的学霸，我纯吃瓜的
樵哥哥太谦虚了{:4_173:} 红影 发表于 2024-1-11 18:49
跟着学习一遍，真好，嘿嘿辛苦了
{:4_191:}