“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”
基本概念
- clip-path 属性使用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏。
- clip-path 属性代替了现在已经弃用的剪切 clip 属性。
基本语法
clip-path: <clip-source> | <basic-shape> | <geometry-box>;
| 属性值 | 说明 |
|---|---|
| clip-source | 用 URL 表示剪切元素的路径 |
| basic-shape | 将元素裁剪为基本形状：inset()矩形 circle()圆形 ellipse()椭圆 polygon()多边形 |
| geometry-box | margin-box / border-box / padding-box / content-box / fill-box / stroke-box / view-box 不支持chrome，且不常用 |
| none | 默认设置，不裁剪 |
属性值 clip-source
<style>
div{
height: 600px;
width: 600px;
outline: auto;
margin: auto;
background: repeating-linear-gradient(45deg,black, black 20px,yellow 20px, yellow 40px);
clip-path: url(#svgClipPath); /* 关键代码，引入svg */
}
</style>
<body>
<div></div>
<!-- 内部svg -->
<svg height="0" width="0">
<defs>
<clipPath id="svgClipPath">
<text x="0" y="300" font-size="150px">WORLD</text>
</clipPath>
</defs>
</svg>
</body>
属性值 basic-shape
inset()
功能：将元素剪裁为一个矩形
语法：clip-path: inset(<top> <right> <bottom> <left> <round num>)，括号内的值类似于margin、padding值的写法，可以写一个值，也可以写多个值
示例：
div{
height: 200px;
width: 200px;
outline: auto;
margin: auto;
background-color: antiquewhite;
/*
裁剪出一个矩形:
上面裁剪20px
右边裁剪5px
下边裁剪30px
左边不裁剪
四个角设置为圆角15px
*/
clip-path: inset(20px 5px 30px 0px round 15px);
}
circle()
功能：将元素剪裁成一个圆
语法：clip-path: circle([<radius>]? [at <position>]?); radius 圆的半径，position 圆心位置
示例：
div{
height: 200px;
width: 200px;
outline: auto;
margin: auto;
background-color: antiquewhite;
/*
200px -> 圆半径
at 0% 0% -> 圆心位置
*/
clip-path: circle(200px at 0% 0%);
}
ellipse()
功能：将元素剪裁成一个椭圆
语法：clip-path: ellipse([horizen-radius]? [vertical-radius]? [at <position>]?); horizen-radius 圆的水平半径 vertical-radius 圆的垂直半径 at position 圆心位置)
示例：
div{
height: 200px;
width: 200px;
outline: auto;
margin: auto;
background-color: antiquewhite;
/*
20px -> 椭圆水平半径
100px -> 椭圆垂直半径
at 50% 50% -> 圆心位置(正中心)
*/
clip-path: ellipse(20px 100px at 50% 50%);
}
polygon()
功能：将元素剪裁成一个多边形，这里其实就是描点，多点连线，最少三个点，以距离左上角的长度为单位，跟canvas画布很像（Defines a polygon using an SVG fill-rule and a set of vertices）。
语法：clip-path:polygon([<X轴-距离左上角顶点的位置> <Y轴-距离左上角顶点的位置>]+);
示例：
/* 三角形 */
clip-path: polygon(50% 0%,100% 100%,0% 100%);
/* 五角星 */
clip-path: polygon(50% 0,61% 38%, 100% 38%,68% 61%,78% 100%,50% 75%, 19% 100%, 31% 61%,0 38%, 38% 38%);
