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. [BZOJ 1106] [POI2007] 立方体大作战tet 【树状数组】

    题目链接:BZOJ - 1106 题目分析 从1到2n枚举每一个位置. 如果枚举到某一个数,这个数已经是第二次出现,那么就看它和第一次出现的位置之间有多少数还没有被匹配,有多少没有匹配的就要进行多少次 ...

  2. NOR FLASH与NAND FLASH

    整理自NOR FLASH 与NAND FLASH 1:NandFlash与NorFlash典型电路图 Nor Flash接原理图 从上图可以看出,该NorFlash采用并行地址和数据总线, 其中,21 ...

  3. h.264并行解码算法2D-Wave实现(基于多核共享内存系统)

    cache-coherent shared-memory system 我们最平常使用的很多x86.arm芯片都属于多核共享内存系统,这种系统表现为多个核心能直接对同一内存进行读写访问.尽管内存的存取 ...

  4. MVVM in Depth

    这篇文章开始粗略的介绍了软件开发中松耦合的概念并讲述了使用MVC.MVP和MVVM三种模式达到松耦合.然后分析了这三种模式适用范围,其中: MVC(Model-View-Controller)适用于w ...

  5. MyEclipse6.5安装SVN插件的三种方法z

    一.安装方法: 方法一.如果可以上网可在线安装   . 打开Myeclipse,在菜单栏中选择Help→Software Updates→Find and Install;   . 选择Search ...

  6. 经典的单例模式c3p0来控制数据库连接池

    package com.c3p0.datapools; //数据库连接池  单例模式 import java.sql.Connection; import java.sql.SQLException; ...

  7. Centos 6.5安装最新版谷歌浏览器-Chrome

    (1)在root下直接运行:yum install --skip-broken google-chrome-stable(2015/6/25更新) (2)网上很多相关到资料,不过都比较繁琐,下面给出一 ...

  8. JavaScript高级程序设计17.pdf

    导航和打开窗口 使用window.open()方法可以导航到一个特定的URL也可以打开一个新的浏览器窗口,接收4个参数:要加载的URL.窗口目标.特性字符串和一个表示新页面是否取代浏览器历史记录中当前 ...

  9. CentOS 7 更改网卡名到以前的eth0

    最近安装了CentOS7,内核总算升级到3.10,支持Linux容器,network namespace······· 但是安装完之后,发现ifconfig没看到熟悉的eth0,却是enp0s3,虽然 ...

  10. [转载]JVM性能调优--JVM参数配置

    http://www.cnblogs.com/chen77716/archive/2010/06/26/2130807.html