Clip属性在W3C官网是这样进行描述的:“通过对元素进行剪切来控制元素的可显示区域,默认情况下,元素是不进行任何剪切的,但是也有可能剪切区域也显示的设置了clip属性”。

.selector {
clip: <shape> | auto | inherit
}

首先你要注意:clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用。clip无法在设置“position:relative”和“position:static”上工作。

上面的语法告诉我们,clip属性只接受三个不同的属性值:

  1. <shape>:shape是一个函数功能,当使用仅使用rect()属性;
  2. auto:这是一个默认值,clip设置auto值和没有进行剪切是一样的效果;
  3. inherit:继承父元素的clip属性值。

很多时候,你可能希望有更多的shape函数功能使用,比如说rect()和circle()等,但是到目前为止仅有rect()函数可使用,不过不用担心,这个功能就可以帮我们制作很多很酷的效果。

Rect()使用

接下来我们来看rect()使用方法。rect()需要设置四个值:top, right, bottom和left。他们之间需要用逗号隔开,而且rect()属性值和margin、padding以及bodrder具有一样的标准,遵循TRBL顺时针旋转的规则。

 clip: rect(<top>, <right>, <bottom>, <left>);

在CSS2.1中,rect()和<top>和<bottom>指定偏移量是从元素盒子顶部边缘算起;<left>和<right>指定的偏移量是从元素盒子左边边缘算起(包括边框)。

<top>, <right>, <bottom>, <left>可以将值设置为“auto”或者长度值<length>。而且还可以充许负的长度值。其中取值为“auto”时,剪切区域的边缘和元素盒子边缘相同。例如:在<top>和<left>设置为auto时,他们就相当于top和left取值为0;如果<right>和<bottom>设置为auto时,他们就相当于元素的宽度(这个宽度包括元素的border、padding和width),或者简单的理解为100%。

注意:1.值不能设置为百分比。 2.在动画设置过程里不能使用auto,使用auto没有动画效果。

实例说明:

.fixedOne {
left: 100px;
top: 100px;
background: red;
}
.fixedOne img {
position: absolute;
border:5px solid blue;
}
/*
*IE8及以上浏览器,Google,FF都支持
*剪切部分的计算,包含边框
*说明,不能使用百分比设置
*/
/*.fixedOne img {
clip: rect(5px,auto,auto,0px);
}*/
/*.fixedOne img {
clip: rect(5px,auto,auto,10px);
}*/
.fixedOne img {
clip: rect(5px,105px,50px,2px);
clip: rect(5px 105px 50px 2px); /*IE87 及以下浏览器支持,解决方法*/
}
.fixedOne img {
width: 120%;
height: 120%;
}

每个状态显示如下:

更多实例:http://www.cnblogs.com/tianma3798/p/5862162.html

参考文章:http://www.w3cplus.com/css3/clip.html

CSS Clip属性的更多相关文章

  1. 将CSS CLIP属性应用在:扩展覆盖效果

    我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡.这个想法是为了实现某种叠加效果,好像它实际上在各个元素的下面.点击其中一个元素将创建一个切断 ...

  2. 理解CSS Clip属性及用法

    应用Clip属性实现的一个简单效果图: 样式写法: .my-element { position: absolute; clip: rect(10px  350px  170px  0); /* IE ...

  3. CSS Clip剪切元素动画实例

    1.CSS .fixed { position: fixed; width: 90px; height: 90px; background: red; border: 0px solid blue; ...

  4. CSS元素:clip属性作用说明

    clip属性是一个比较有用的属性,但往往在实际应用中,并不多见,介绍的也很少.应用clip属性需要注意的两点: 一.clip属性必须和定位属性postion一起使用才能生效. 二.clip裁切的计算坐 ...

  5. css之属性部分

    这篇写的是今天的学习到的属性,一共20个. 属性再多,但也要会使用,会在使用时可以记起它,才能起到它为我们所需要的作用. 样式属性 1.border CSS边框属性允许你指定一个元素边框的样式和颜色. ...

  6. [ javascript css clip ] javascript css clip 的奇思妙想之文字拼接效果

      语法: clip : auto | rect ( number number number number ) 参数: auto : 对象无剪切 rect ( number number numbe ...

  7. css3中clip属性

    clip 属性用来设置元素的形状.用来剪裁绝对定位元素. 当一幅图像的尺寸大于包含它的元素时,"clip" 属性允许规定一个元素的可见尺寸,这样此元素就会被修剪并显示在这个元素中. ...

  8. CSS clip:rect矩形剪裁功能及一些应用介绍

    CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...

  9. div+css的属性

    div+css的属性 gCascading Style Sheet 层叠式样式表 ==> 层叠样式表 Internal Style Sheet 内部样式表 External Style Shee ...

随机推荐

  1. 搭建DirectUi开发平台

    DirectUi的效果可以使用GDI.GDI+.DirectX.OpenGL实现,常用的有GDI和GDI+,后两种有杀鸡用牛刀的感觉.在网络上能找到此方面的教材 现在的软件越来越多的有很炫目的界面,看 ...

  2. StringGrid右击选中表格(发消息给句柄模拟点击,右键点击也是MouseDown)

    顺便还把单元格给变了: procedure TFGLGL.StringGrid1MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShi ...

  3. Delphi 在任务栏隐藏程序图标

    Delphi 在任务栏隐藏程序图标 方法一:1.修改工程文件中的“Application.MainFormOnTaskbar := True;”为“Application.MainFormOnTask ...

  4. Move Zeroes——Leetcode

    Given an array nums, write a function to move all 0's to the end of it while maintaining the relativ ...

  5. Bootstrap 3 兼容 IE8 浏览器

    公司新上的项目,前端用的Bootstrap3的框架,但它已经放弃对IE9下的支持了.可IE8还是有着许多用户,不能不照顾到他们,IE7以下的,我只想说,现在什么年代了,要解放思想,与时俱进啊,就不能动 ...

  6. 逆转字符串leetcode

    public class Solution { public String reverseWords(String s) { String ans=reverse(s); String s2[]=an ...

  7. bzoj 1911 [Apio2010]特别行动队(斜率优化+DP)

    1911: [Apio2010]特别行动队 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 3191  Solved: 1450[Submit][Statu ...

  8. Eclipse svn图标不显示

    在菜单栏中:windows ->preferences->General->Appearance->Lable Decorations 勾选其中的 SVN 项,最后应用确认之后 ...

  9. SQL 查询条件放在LEFT OUTER JOIN 的ON语句后与放在WHERE中的区别

    这两种条件放置的位置不同很容易让人造成混淆,以致经常查询出莫名其妙的结果出来,特别是副本的条件与主表不匹配时,下面以A,B表为例简单说下我的理解. 首先要明白的是: 跟在ON 后面的条件是对参与左联接 ...

  10. linux —— 编译linux内核

    目录:     0.测试环境 1.获得最新内核源代码  2.编译源代码 3.运行新的内核 0.测试环境: 我的系统 : ubuntu 16.04 LTS (内核版本:4.4.0-36-generic ...