您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 clip

2018-8-23 01:08| 作者: admin| 查看: 956| 评论: 0|来自: 蚂蚁部落

clip翻译成中文是"裁切"之意;顾名思义,在css中,clip属性是用来对元素进行裁切。

特别说明:此属性已经从标准中删除,不推荐使用。

语法结构:

[CSS] 纯文本查看 复制代码
clip: <shape> | auto | inherit

参数解释:

(1).<shape>:一个函数属性,当前只支持rect(),或许在以后会添加更多的函数属性。

(2).auto:默认,不裁切,对于top和left,值相当于等于0px,对于bottom和right,值相当于等于100%。

(3).inherit:继承父元素的clip属性。

特别说明:clip只对绝对定位元素有效,也就是采用position:absolute或者postion:fixed的元素有效。

一.rect()的使用:

[CSS] 纯文本查看 复制代码
clip: rect(<top>, <right>, <bottom>, <left>)

rect中各个参数值的顺序与padding和margin是一样的。

rect翻译成中文是矩形的意思,此函数的目的是从指定元素上裁切下一个矩形。

裁切方式如下:

(1).top和bottom属性都是以上边缘为基准向下进行裁切,没有重合的部分就是我们需要的地方。

(2).left和right属性都是以左边缘为基准向右进行裁切,没有重合的部分就是我们需要的地方。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/23/010903zhnzemkb1wix1wix.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上图中白色的区域就是被裁剪获取的区域,已经演示的很清楚了这里就不再介绍。

代码如下:

[CSS] 纯文本查看 复制代码
clip:rect(15px,50px,45px,5px);

值之间用逗号分隔,不能用百分比表示各个参数值,下面通过代码对此属性进行一下演示。

为了更为清晰的进行演示,使用以下背景图:

a:3:{s:3:\"pic\";s:43:\"portal/201808/23/010908uzzfnbzp7tl2t5ao.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

以上图片是309x99,分隔为9份,每一份的长宽分别是103px和33px。

二.代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  position:absolute;
  width:309px;
  height:99px;
  background-image:url(mytest/demo/mybg.png); 
  clip:rect(0px,103px,33px,0px); 
}
</style>
</head>
<body>
<div></div>
</body>
</html>

以上代码可以将序号为1的矩形区域裁切出来。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  position:absolute;
  width:309px;
  height:99px;
  background-image:url(mytest/demo/mybg.png); 
  clip:rect(66px,206px,99px,103px); 
}
</style>
</head>
<body>
<div></div>
</body>
</html>

以上代码可以将序号为8的矩形区域裁切出来。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  position:absolute;
  width:309px;
  height:99px;
  background-image:url(mytest/demo/mybg.png); 
  clip:rect(auto,auto,33px,103px); 
}
</style>
</head>
<body>
<div></div>
</body>
</html>

以上代码可以将序号为2和3的矩形区域裁切出来,top为auto时相当于为0px,right为auto时相当于为100%。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  position:absolute;
  width:309px;
  height:99px;
  background-image:url(mytest/demo/mybg.png); 
  clip:rect(66px,206px,33px,103px); 
}
</style>
</head>
<body>
<div></div>
</body>
</html>

兼容性问题:

总体来讲此属性的兼容性不错,谷歌、火狐和IE7以上的浏览器都支持此属性的标准语法,但是IE6和IE7在语法的格式上有一些小的区别,代码如下:

[CSS] 纯文本查看 复制代码
clip:rect(0px 103px 33px 0); /*IE6和IE7*/
clip:rect(0px,103px,33px,0px); /* IE7以上和其他标准浏览器*/

标准写法,值与值之间用逗号分隔,在IE6和IE7中用空格分隔。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS currentColor下一篇:CSS3 scale3d(x,y,z)

最新评论

返回顶部