学习笔记 CSS clip属性用法指导

开发 前端
你对CSS clip 属性的用法是否了解,这里向大家简单描述一下,clip 属性剪裁绝对定位元素,即这个属性用于定义一个剪裁矩形。

本文和大家重点讨论一下CSS clip 属性的用法,这个属性用于定义一个剪裁矩形。对于一个绝对定义元素,在这个矩形内的内容才可见。

CSS clip 属性

定义和用法

clip 属性剪裁绝对定位元素。

当一幅图像的尺寸大于包含它的元素时会发生什么呢?"clip" 属性允许您规定一个元素的可见尺寸,这样此元素就会被修剪并显示为这个形状。

说明

这个属性用于定义一个剪裁矩形。对于一个绝对定义元素,在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大,也可能比内容区小。

实例

剪裁图像:

  1. img  
  2.   {  
  3.   position:absolute;  
  4.   clip:rect(0px,60px,200px,0px);  
  5.   }  
  6.  

浏览器支持

所有主流浏览器都支持 clip 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

可能的值
 

【编辑推荐】

  1. CSS 绝对定位属性absolute用法初探
  2. IE6.0对padding的解读分析
  3. 探究CSS display属性用法
  4. CSS中使用margin属性定义网页边距
  5. CSS中cellspacing和cellpadding属性用法揭秘

 

责任编辑:佚名 来源: 68tt.com
相关推荐

2010-09-01 13:37:58

CSSclip属性

2010-08-31 10:57:44

clipCSS

2010-08-25 10:21:49

CSSmargin

2010-09-06 13:04:16

CSS浮动float

2010-09-16 10:10:50

CSSdisplay

2010-09-14 16:04:40

CSSclip属性

2010-07-26 10:09:01

Perl split函

2010-08-27 11:10:30

CSSmargin

2010-08-26 09:58:01

CSS clear

2010-07-21 13:53:07

Perl引用

2010-08-05 09:05:14

Flex Button

2010-08-17 10:00:17

DIV样式

2010-08-25 13:54:29

CSStop

2010-08-25 13:33:55

CSSpadding

2010-09-03 12:46:28

CSSexpression

2010-08-16 10:18:53

DivCSS

2010-08-25 14:26:09

CSSdisplay

2010-08-25 14:36:35

CSSheightwidth

2010-08-23 08:45:08

CSSpadding内边距

2010-08-23 15:33:47

CSSpadding
点赞
收藏

51CTO技术栈公众号