clip

  • 版本:CSS2/3
  • 媒体:视觉

clip语法:

clipauto | <shape>

<shape>:rect(<number>|auto <number>|auto <number>|auto <number>|auto) | inset(<number>|auto <number>|auto <number>|auto <number>|auto)

默认值auto

适用于:绝对定位元素

继承性:无

动画性:当值为<shape>

计算值:指定的值

clip取值:

auto:
对象无剪切
rect(<number>|auto <number>|auto <number>|auto <number>|auto):
依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换,即此边不剪切。
上-左 方位的裁剪:从0开始剪裁直到设定值,即 上-左 方位的auto值等同于0;
右-下 方位的裁剪:从设定值开始剪裁直到最右边和最下边,即 右-下 方位的auto值为盒子的实际宽度和高度;

示例:clip:rect(auto 50px 20px auto)

说明:上边不剪切,右边从左起第50个像素开始剪切直至最右边,下边从上起第20个像素开始剪切直至最底部,左边不剪切

inset(<number>|auto <number>|auto <number>|auto <number>|auto):
该剪裁方式与 rect() 类似,不同的是 inset() 的剪裁,每个方位都是参照该方位的边界来进行裁剪的。
上-右-下-左 方位的裁剪:从0开始剪裁直到设定值,即 上-右-下-左 方位的auto值都等同于0;(CSS3)

clip说明:

检索或设置对象的可视区域。区域外的部分是透明的。
  • 必须将position的值设为absolute,此属性方可使用。
  • 对应的脚本特性为clip

clip兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6.0-7.0 #1 #2 1.0-25.0 #2 1.0-5.1.7 #2 1.0-31.0 #2 7.0-18.0 #2
版本 8.0-11.0 #2
  1. IE7及更早浏览器只支持rect()内部的数值以空格分隔的方式,不支持以逗号分隔。
  2. 不支持clip属性的CSS3新增属性值: inset()

clip示例:

HTML+CSS重难点(一) 盒子模型及标准流下的定位

默认情况下绝大多数元素的盒子边界、边框和填充宽度都是0,盒子的背景是透明的。所以,在不设置CSS样式的情况下看不到元素的盒子;...1月7日

使用margin-left,margin-top与position:absolute来对图片进行定位。使用了CSS3中的calc()来计算需要定位的值。示例图片如下:2...2016年10月9日

CSS 中的定位属性详解

元素仍然处于正常文档流当中,但可以通过left、top、right和bottom的CSS规则来改变元素的位置。如果元素一旦使用了相对定位之后...2016年8月1日

六个角度剖析css中的浮动定位

首先给浮动一个定义:浮动就是程序中定位的一种那么什么又是定位:元素框相对于其正常位置应该出现的位置在哪儿浮动定位:解决了多个块级元素能在一行内显示...2016年6月23日

CSS定位问题(1):盒模型、浮动、BFC

CSS·BFC,定位,盒模型分享到:引子:在谈到css定位问题的时候先来看一个小问题:已知宽度(假如:100px)div框,水平居中,左右两边分别使用div框填充...2016年4月27日

CSS绝对定位absolute详解

介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性。如果能理解浮动float,对理解绝对定位absolute会大有帮助...2016年5月4日

《CSS权威指南》学习记录——定位(一)

利用定位,可以准确地定义元素框相对于其正常位置应该出现在哪里,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。定位的类型关键字:position...2016年6月10日

深入理解CSS中背景background-position负值定位

作者:css教程点击次数:52次发布日期:2016-05-25摘要:深入理解CSS中背景background-position负值定位,有点向我们裁剪背景图片...2016年5月25日

深入理解CSS定位中的偏移

CSS有三种基本的定位机制:普通流、浮动和绝对定位。利用定位,可以准确地定义元素框相对于其正常位置应该出现的位置,或者相对于父元素...2016年3月21日

昨天我练习了用CSS(即层叠样式表Cascading Stylesheet)Selector来定位(locate)页面上的元素(Elements)...2016年3月14日

iv+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。Position属性有四个值:static、fixed、absolute和relative...2015年11月26日

CSS网页布局教程:绝对定位和相对定位

本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性(偏移属性...2015年8月30日

[day04学习笔记] CSS盒子定位属性 深入剖析!!

[day04学习笔记]CSS盒子定位属性详解首先做一下概念性的了解:定位就是把元素放在哪个位置!实际上每个元素都有个定位属性:position:定位属性有四个值...2014年8月10日

关于css定位,你需要知道的5件事

已经可以通过不同的css布局技巧制作出很复杂的布局。其中有些技巧有很长的历史(比如:floats),也有一些是近几年才被青睐的(比如flexbox)。在这篇文章中...2016年10月22日

CSS定位-position

CSS定位:#三种定位机制:(1)普通流,(2)浮动,(3)绝对定位;属性描述position把元素放置到一个静态的、相对的、绝对的、或固定的位置中...2015年2月8日

CSS定位(Positioning)

它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。​CSS有三种基本的定位机制:普通流、浮动和绝对定位...2015年7月28日

【css】position的绝对定位absolute与relative的区别

将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过cssz-index属性定义。此时对象不具有边距...2016年11月4日

Css教程:position定位的元素

所以在它成为你的惯用技巧前你需要掌握它们。一旦你更深入地了解了它是怎么运作的,你就能够做出一些更棒的事情来。CSS盒模型和定位的类型为了搞清楚定位首先你得了解C...2015年5月8日

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册