当前位置: 首页 > Web前端 > HTML

CSS中clip-path属性的使用

时间:2023-04-02 21:01:56 HTML

clip-path使用多个坐标点组成的多边形值,坐标的第一个值是x方向,第二个值是y方向。左上角为原点,右下角为(100%,100%)点。

body{background-color:#000;}.fa{border:1pxsolid#fff;颜色:黄绿色;填充:10px;边距:10px;}.fa>div{宽度:110px;高度:110px;背景颜色:黄绿色;margin:20pxauto;}.polygon1{clip-path:polygon(50%0px,100%100%,0px100%)}.polygon2{clip-path:polygon(0px50%,50%0,100%50%),50%100%)}.polygon3{剪辑路径:多边形(0%60%,20%0%,60%0%,40%60%)}

多边形

值由多个坐标点组成,坐标的第一个值是x方向,第二个值是y方向。

左上角为原点,右下角为(100%,100%)点。

圆值为坐标点和半径。左上角为原点,右下角为(100%,100%)点。定义半径时,可以使用at关键字来定义坐标。body{background-color:#000;}.fa{border:1pxsolid#fff;颜色:黄绿色;填充:10px;边距:10px;}.fa>div{宽度:110px;高度:110px;黄绿色;margin:20pxauto;}.circle1{clip-path:circle(50%at50%50%)}.circle2{clip-path:circle(70%at50%50%)}.circle3{clip-path:circle(30%at10%10%)}

该值由坐标点和半径组成。

左上角为原点,右下角为(100%,100%)点。

定义半径时,可以使用at关键字来定义坐标。

椭圆值为x椭圆的轴半径、y轴半径、定位椭圆坐标由三部分组成。左上角为原点,右下角为(100%,100%)点。at关键字分隔半径和坐标。body{background-color:#000;}.fa{border:1pxsolid#fff;颜色:黄绿色;填充:10px;边距:10px;}.fa>div{宽度:110px;高度:110px;黄绿色;margin:20pxauto;}.ellipse1{clip-path:ellipse(30%20%at50%50%)}.ellipse2{clip-path:ellipse(20%30%at50%50%)}.ellipse3{clip-path:ellipse(60%10%at10%10%)}

ellipse

取值为x轴半径,y轴半径,椭圆的定位椭圆的坐标由三部分组成。

左上角为原点,右下角为(100%,100%)点。

at关键字将半径与坐标分开

inset值为(upperrightlowerleftrounduppercornerradiusupperrightcornerradiusupperrightcornerradiuslowerrightcornerradiuslowerleftcornerradius)round前面的值,表示distance,如果第一个值为25%,则表示图像从25%开始绘制在顶部。body{background-color:#000;}.fa{border:1pxsolid#fff;颜色:黄绿色;填充:10px;边距:10px;}.fa>div{宽度:110px;高度:110px;黄绿色;margin:20pxauto;}.inset1{clip-path:inset(25%0%25%0%round0%25%0%25%)}.inset2{clip-path:inset(0%25%25%0%round25%25%25%0%)}.inset3{clip-path:inset(25%25%0%0%round0%25%0%25%)}

inset

取值为(upperrightlowerleftroundleftuppercornerradiusupperrightcornerradiusupperrightcornerradiuslowerleftcornerradius)

round前面的值表示distance,如果第一个值为25%,表示图像从25%开始绘制