`

CLIP: rect 是什么?(转)

阅读更多
Clipping的中文解释就是剪辑的意思,这个属性决定了对象的哪个部位可以被看到。它不会改变任何对象的性质。
Clipping 的区域是一个矩形, 而这个矩形的尺寸取决于于四个边的位置。
这四个边用 top, right, botton, left 来表示。
请注意:这四个边的位置是相对于对象的而不是相对于窗口的。
Clip属性的书写格式是这样的:

Clip rect(top,right,bottom,left)

在这里,top,right,bottom,left的值都是以像素pixels为单位的。

为了更好的理解相对于对象这个含义
,我们看一个例子,比如左面是一幅
285×185的图片,我们对它加入下面这
段代码:

style="clip:rect(0,200,100,0)"


这段代码使图片将以200×100的形式显
示。这是因为rect中规定的200,代表了图片的右端距离是200pixels,也就 是图片的宽度是200pixels;同理, 100定义的则是图片的高度。这样图片就 好象被剪辑了一样,将显示成右下图的样子:

基本原理就介绍这么多,让我们来看两个例子
,一个是静态调整可视区域,一个是动态调整。

在这两个例子中,您可以点击对应的链接,得
到图片四条边的位置,可以点击链接使图片的可视
区按照规定的范围显示,还有您可以点击后,使图
片就像放电影一样,慢慢的展开。




好像这个属性要和position:absolute;一起用才好用


http://hi.baidu.com/godian/blog/item/6169f53dcfd40005baa167d8.html
分享到:
评论

相关推荐

    CSS clip元素rect属性中各个参数的含义示例介绍

    `clip`属性的语法是通过`rect()`函数来定义剪裁区域的,其接受四个参数,依次表示剪裁矩形的上、右、下、左边缘相对于元素自身的偏移量。这些参数都是长度值,可以是像素、百分比或其他CSS认可的长度单位。 例如,`...

    swift-iOS渐变支持——线性渐变径向渐变渐变动画lable字体渐变lable字体渐变动画

    override func drawText(in rect: CGRect) { let attributedString = NSMutableAttributedString(string: text ?? "") let gradient = CGGradient(colorsSpace: nil, colors: [startColor.cgColor, endColor....

    分割图片clip动画原理

    2. `rect()`函数:`clip`属性值是一个`rect(top, right, bottom, left)`函数,参数分别表示元素的上、右、下、左边距,单位通常是像素。通过改变这些值,我们可以实现图片的动态剪裁,从而创建动画效果。 二、CSS3...

    浅谈css中的clip裁剪用法

    clip的rect属性 : clip:rect(top,right,bottom,left)四个属性值不可缺少; 这四个属性值到底是如何计算的呢 先看下边这张图   rect的top,right,bottom,left是基于左上角来计算的 来看一个小demo吧  html: XML/...

    去掉checkbox边框的方法(css)

    clip: rect(6 15 15 6) checked=checked> 关键:style=position:absolute;clip: rect(6 15 15 6) 解释: 此属性定义了绝对(absolute)定位对象可视区域的尺寸。 1.clip属性必须和定位属性postion一起使用才能...

    CSS裁剪属性clip使用的实例教程

    CSS裁剪clip这个属性平时用的不多,但其实它并不是CSS3的新属性,很早就开始出现了。本文将介绍关于clip属性的相关知识 ...rect clip:rect(top,right,bottom,left)中的值不是边偏移,而是距元素左上角的距离。具体来

    IOS按照路径裁切图片

    override func draw(_ rect: CGRect) { guard let image = imageToCrop else { return } let context = UIGraphicsGetCurrentContext() context?.saveGState() // 创建裁切路径 let path = UIBezierPath(rect...

    可编辑的下拉框

    使用text和select实现可编辑的下拉框,主要用了clip: rect(2 108 18 91);裁剪工具。

    css3 clip属性和jquery打造响应式背景图片放大动画

    clip: rect(0px, 200px, 200px, 0px); } ``` 在这个例子中,我们定义了一个200px x 200px的div,并通过`clip`属性裁剪掉了其外部的内容。 接下来,CSS3的`transition`属性允许我们在改变某个CSS属性时添加平滑...

    css3 clip实现圆环进度条的示例代码

    `clip`属性的语法是`rect(top, right, bottom, left)`,它定义了一个矩形剪裁区域,参数分别代表了元素的上、右、下、左边距。当元素的内容超出这个矩形区域时,超出的部分会被隐藏。 要创建一个圆环进度条,我们...

    javascript CSS画图之基础篇

    一切矢量图的根本____1*1px的点 如果对CSS有一定的了解,对 clip:rect(top,right,bottom,left)熟悉的话,可以知道,代码剪辑出一个区域,需要注意的是,clip:rect中的四个边的位置是相对于对象的而不是相对于窗口的...

    CSS实现饼图效果

    这里的`clip: rect()`属性用于裁剪每个扇区,使其只显示部分圆形。裁剪的四个参数分别是上、右、下、左四边的距离,我们将右边界设置为当前扇区的宽度,其余三边设置为0,这样就能形成一个扇形。 为了填充颜色和...

    select样式表

    clip: rect(0px, 181px, 20px, 0px); } .box2 { clip: rect(0px, 179px, 18px, 0px); } ``` #### 4. 创建自定义的下拉菜单样式 除了直接对`<select>`元素本身进行样式修改之外,还可以创建一个自定义的下拉菜单...

    baidu地图(map)

    baidu地图(map) /**public 地图中心的地理坐标*/ this.centerMapX=0; /**public 地图中心的地理坐标*/ this.centerMapY=0;...clip:rect(0 '+this._width+' '+this._height+' 0);"></div>'); },

    clip 剪裁矩形实现代码

    这里的 `clip: rect(21px, 68px, 51px, 38px)` 表示裁剪区域的上边界为21px、右边界为68px、下边界为51px、左边界为38px。这意味着图片的一部分将被裁剪掉,只显示指定裁剪区域内的内容。 #### 五、深入理解 - **...

    js Clip的奇思妙想之文字拼接效果

    Clip,对,就是css里的clip属性,被多数人忽略的属性: 语法: clip : auto | rect ( number number number number ) 参数: auto : 对象无剪切 rect ( number number number number ) : 依据上-右-下-左的顺序提供...

    CSS教程:clip属性详细讲解

    此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将 position 属性的值设为 absolute ,此属性方可使用。  clip属性是一个比较有用的属性,但往往在实际应用中,并不多见,...clip : auto | rect ( number num

    canvas学习(十三):clip之图形剪辑

    在canvas上,我们可以使用`beginPath()`, `moveTo()`, `lineTo()`, `arc()`, `rect()`等方法来创建路径,然后通过调用`clip()`,将这个路径设置为剪辑区域。一旦设置了剪辑区域,所有后续的绘图操作都会被限制在这个...

    canvas-clip:帆布夹

    "canvas-clip"是关于如何使用Canvas的clip方法来实现图像裁切的功能。这个功能在网页设计、游戏开发或者数据可视化等领域都有广泛的应用。 Canvas API提供了多个方法来对画布上的内容进行操作,其中`clip()`方法...

Global site tag (gtag.js) - Google Analytics