css脚本中clip属性起什么作用呢?


摘要:
下文讲述css代码中clip属性的功能及示例说明,如下所示:


clip属性的功能说明:

检索或设置对象的可视区域


clip:auto |<shape>
<shape>:rect(<number>|auto <number>|auto <number>|auto <number>|auto) | inset(<number>|auto <number>|auto <number>|auto <number>|auto)
———–参数说明—————
auto:自动值-对象无剪切—适用于绝对定位元素
shape:
针对当前元素生成一个计算形状
rect(<number>|auto <number>|auto <number>|auto <number>|auto):
根据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换,即此边不剪切。
上-左 方位的裁剪:从0开始剪裁直到设定值,即 上-左 方位的auto值等同于0;
右-下 方位的裁剪:从设定值开始剪裁直到最右边和最下边,即 右-下 方位的auto值为盒子的实际宽度和高度;

例:clip:rect(auto 60px 30px auto)
说明:上边不剪切,右边从左起第60个像素开始剪切直至最右边,
     下边从上起第30个像素开始剪切直至最底部,左边不剪切

inset(<number>|auto <number>|auto <number>|auto <number>|auto):
该剪裁方式与 rect() 类似,不同的是 inset() 的剪裁,每个方位都是参照该方位的边界来进行裁剪的。
上-右-下-左 方位的裁剪:从0开始剪裁直到设定值,即 上-右-下-左 方位的auto值都等同于0

例:

 <meta charset="utf-8" />
<style>
div{ 
    position:absolute;
    height:180px;
    width:200px;
    line-height:80px;
    clip:rect(0 auto 45px 20px);
    /*
      上 右  下  左 
      上面不裁剪  右边 不裁剪
      下面离左顶点45px开始裁剪(剩余部分全部裁剪掉)
       
      左边裁剪20px;
    */
    background:green;
    color:white;font-weight:bold;
}
</style>

<p>
 maomao365.com <br />
 CSS clip属性示例说明
</p>
<hr />
<div>clip属性查看</div>
css属性clip示例说明

css属性clip示例说明