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

CSSclip属性深入

时间:2023-03-30 22:01:16 CSS

img{position:absolute;clip:rect(75px60px151px0px);}在我之前的工作中使用了clip属性。最近在工作中再次使用这个属性的时候,发现忘记了怎么设置这个属性的值。好像上次没真正理解这个属性,所以查了下文档才知道的。这里简单分享一下,同时加深形象。函数w3school是这样说的:clip属性裁剪绝对定位的元素。MDN是这样说的:clip属性定义了元素的哪一部分是可见的。可能值值说明shape设置元素的形状。唯一合法的形状值是:rect(top,right,bottom,left)autodefault。不应用剪裁。inherit指定clip属性的值应该从父元素继承。rect()裁剪出一个“矩形”可见区域。指定矩形的上边框相对于框的上边框的偏移量指定矩形的下边框相对于框的上边框的偏移量指定矩形的偏移量矩形的左边框相对于框的左边框指定矩形的右边框相对于框的左边框的偏移实例现在使用clip属性裁剪下图img{position:absolute;clip:rect(75px60px151px0px);}

clip属性裁剪一张图片:

/body>clip:rect(75px60px151px0px);指定矩形的上边框相对于框的上边框偏移75像素,矩形的左边框相对于框的左边框60像素els,矩形的下边框相对于框的上边框偏移151像素,矩形的右边框相对于框的左边框偏移0像素。所以显示的部分应该是左下四分之一区域。如下图所示:以上效果都可以在w3school中试用。之前我也用clip实现过一个音频播放环形进度条。如果你有兴趣,也可以看看。使用cssclip属性实现音频播放环形进度条