【CSS】你不知道的Css之clip

我们在日常工作中用到的CSS其实只是很少的一部分，那么今天就开一个新的专题，一点点列出不常用或是常用但你没想到的Css~~~

可以裁剪图形的 clip

• 基本语法
  clip : auto | <shape>
  <shape> : rect(<number>|auto <number>|auto <number>|auto <number>|auto)
  默认值：auto
  适用于：绝对定位元素
  继承性：无
  动画性：当值为<shape>时
  计算值：指定的值

• 取值
  auto:对象无剪切
  rect(<number>|auto <number>|auto <number>|auto <number>|auto):依据 上 ~ 右 ~ 下 ~ 左 的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。

• 兼容性
  

  兼容性

• 示例

1.只剪切上边的值 rect(20px auto auto auto)

<style>
        /* css */
    #box{
        position: relative;
        width:100px;
        height: 100px;
        background-color: #4caf50;
    }
    #inner{
        position: absolute;
        width:100px;
        height: 100px;
        background-color: #8a2202;
        clip: rect(20px auto auto auto);
    }
</style>

<!-- DOM 结构 -->
<div id="box">
    <div id="inner"></div>
</div>

写两个内嵌关系的div，外层盒子设为绿色相对定位，内层盒子设为红色绝对定位，在没有设置clip属性的时候，两个盒子完全重合，视觉效果为一个100*100的红色盒子。
当只设置rect第一个参数为具体数值时，div从上向下剪切掉20px。运行结果如下图

只剪切上边

2.只剪切右边的值 rect(auto 20px auto auto)

<style>
        /* css */
    #box{
        position: relative;
        width:100px;
        height: 100px;
        background-color: #4caf50;
    }
    #inner{
        position: absolute;
        width:100px;
        height: 100px;
        background-color: #8a2202;
        clip: rect(auto 20px auto auto);
    }
</style>

<!-- DOM 结构 -->
<div id="box">
    <div id="inner"></div>
</div>

这里的结果和我之前预想的不太一样，原以为是从右侧边开始剪切掉20px，最后是一个宽80px高100px的红色盒子，但是实际结果是一个宽20px高100px的红色盒子。
所以第二个代表 右 的值应该是表示从最右开始剪切，剩20px。

只剪切右侧

3.只剪切下方 rect(auto auto 20px auto)

<style>
        /* css */
    #box{
        position: relative;
        width:100px;
        height: 100px;
        background-color: #4caf50;
    }
    #inner{
        position: absolute;
        width:100px;
        height: 100px;
        background-color: #8a2202;
        clip: rect(auto auto 20px auto);
    }
</style>

<!-- DOM 结构 -->
<div id="box">
    <div id="inner"></div>
</div>

第三个值表示从最下还是剪切，最后剩20px

只剪切下方

3.只剪切左侧 rect(auto auto auto 20px)

<style>
        /* css */
    #box{
        position: relative;
        width:100px;
        height: 100px;
        background-color: #4caf50;
    }
    #inner{
        position: absolute;
        width:100px;
        height: 100px;
        background-color: #8a2202;
        clip: rect(auto auto auto 20px);
    }
</style>

<!-- DOM 结构 -->
<div id="box">
    <div id="inner"></div>
</div>

从左侧开始剪切20px

只剪切左侧

简单总结一下：
1.clip为css3的裁剪属性，应用于absolute和fixed定位的对象上；
2.有两个属性值，其中auto为默认属性，表示不剪切；
3.rect(n n n n)属性为剪切属性，有四个值，可以为带单位的数值，也可以写为auto，当为auto时表示不剪切该边；
4.rect 属性的第一个和第三个值表示开始裁切掉多少，第二个和第四个值表示裁切到多少。