clip-path属性(CSS设置)
clip-path属性(CSS设置)
clip-pathCSS特点能够创立一个只有元素的部分区域能够显示的剪切区域。区域内的部分显示，区域外的躲藏。
clip-path的特点值能够是以下几种：
1.inset；将元素剪裁为一个矩形，
定义：clip-path:inset(<间隔元素上面的间隔>,<间隔元素右面的间隔>,<间隔元素下面的间隔>,<间隔元素左边的间隔>,<圆角边框>），括号内的值类似于margin、padding值的写法，能够写一个值，也能够写多个值。
运用：clip-path:inset(2px2px20px20pxround10px);
作用：
代码：
.divTwo{
margin:50px;
width:80px;
height:80px;
background-color:red;
border:1pxsolid#000;
clip-path:inset(2px2px20px20pxround10px);
}
2.circle；将元素剪裁成一个圆
定义：clip-path:circle(圆的半径at圆心)
运用：clip-path:circle(40pxat50%50%)
作用：
3.ellipse；将元素剪裁成一个椭圆
定义：clip-path:ellipse(圆的水平半径圆的垂直半径at圆心)
运用：clip-path:ellipse(20px40pxat50%50%)
作用：
4.polygon；将元素剪裁成一个多边形，这里其实就是描点，多点连线，最少三个点，以间隔左上角的长度为单位，跟canvas画布很像，下面以三角形为例
定义：clip-path:polygon(<间隔左上角的X轴长度间隔左上角Y轴的长度>，<间隔左上角的X轴长度间隔左上角Y轴的长度>，<间隔左上角的X轴长度间隔左上角Y轴的长度>)
运用：clip-path:polygon(40px0px,0px80px,80px80px);
作用：
clip-path:polygon(35px40px,50px0,65px40px,100px40px,70px60px,80px100px,50px80px,20px100px,30px60px,0px40px);//五角星
作品标签： CSS
优秀作品：
最新作品：
评论列表（共234人参与）参与讨论或分享设计作品获得视觉癖积分奖励
俑二号坑注册会员
2021-07-24 13:19:17
庆高兴! 7.祝国庆节高兴，越来越好! 8.希望个个如愿!国庆高兴! clip-path属性(CSS设置iv style="text-align: center;"。。。
赤色（Mag游客
2021-07-24 16:0:2
游客32741：clip-path属性：石灰绿。 limebrick：石灰砖。 三、示例 Lemonandlimewerebothtemallimg/210716/1-210G60R334.jpg" style="height: 492px; width: 400px;" />
回复
