美文网首页
css :clip rect 正确的使用方法

css :clip rect 正确的使用方法

作者: zhao_ran | 来源:发表于2020-12-18 15:16 被阅读0次

    CSS clip 是一个极少使用,但又确实存在的属性。而且,它其实在CSS2时代就有了。w3school 上有这么一句话:clip 属性剪裁绝对定位元素。也就是说,只有 position:absolute 的时候才是生效的。

    img
      {
      position:absolute;
      clip:rect(0px,60px,200px,0px);
      }
    
    1136255-20181217213315263-1584261197.png
    img
      {
      position:absolute;
      clip:rect(A,B,C,D);
      }
    

    当然具体写的时候得写具体的像素值。

    这个图的作用是,说明这4个值到底指的是那个距离。

    A:剪裁矩形距离父元素顶部的长度。

    B:剪裁矩形距离父元素左边的长度 + 矩形宽度。

    C:剪裁矩形距离父元素顶部的长度 + 矩形高度。

    D:剪裁矩形距离父元素左边的长度。

    相关文章

      网友评论

          本文标题:css :clip rect 正确的使用方法

          本文链接:https://www.haomeiwen.com/subject/euaxnktx.html