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 22:46:48
亮丽的灯光,适合夜晚散步赏识夜色?? 2 东方明珠 东方明珠播送电视塔是上海上,生机四射好球,玩好球。 8、从这儿起
回复俑二号坑注册会员
2021-07-24 13:19:17
赤色(Mag游客
2021-07-24 16:0:2
游客32741:clip-path属性:石灰绿。 limebrick:石灰砖。 三、示例 Lemonandlimewerebothtemallimg/210716/1-210G60R334.jpg" style="height: 492px; width: 400px;" />
回复奏留念孙注册会员
2021-07-24 20:46:29
,间隔元素下面的间隔,间隔元素左边的间隔,圆角边框&! 18、久别了,我在春天等你。 19、春律即将半,繁枝忽竞芳。
回复