clip - CSS（层叠样式表） 编辑

已废弃
该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。

概述

clip 属性定义了元素的哪一部分是可见的。clip 属性只适用于 position:absolute 的元素。

警告：这个属性已被废弃。建议使用 clip-path 。

初始值	auto
适用元素	absolutely positioned elements
是否是继承属性	否
适用媒体	visual
计算值	auto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the computed length otherwise
Animation type	a rectangle
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

形式语法: <shape> | auto
where 
<shape> = rect(<top>, <right>, <bottom>, <left>)

clip: rect(1px, 10em, 3rem, 2ch)
clip: auto

clip: inherit

值

<shape>

一个矩形 <shape>

rect(<top>, <right>, <bottom>, <left>)   /* 标准语法 */

或

rect(<top> <right> <bottom> <left>)      /* 向后兼容语法 */

<top> 和 <bottom> 指定相对于盒子上边框边界 的偏移，<right> 和 <left> 指定了相对于盒子左边框边界 的偏移。

<top>， <right>， <bottom>， 和 <left> 的值可以是 <length> 值或 auto。

auto

元素不裁剪(默认值)

示例

p { border:dotted;  position:relative; }

#img2 {
  position:absolute;  left:263px;

  clip: rect(40px, 200px, 150px, 30px);
  /* 标准语法，Internet Explorer 4-7 不支持 */
}

#img3 {
  position: absolute; left:526px;

  clip: rect(40px  200px  150px  30px);
  /* 非标准语法，但是包括火狐与 IE 在内的主要浏览器均支持 */
}

规范

Specification	Status	Comment
CSS Transitions clip	Working Draft	Defines clip as animatable.
CSS Level 2 (Revision 1) clip	Recommendation

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	1.0 (1.0)	4.0	7.0	1.0 (85)
			8.0 该版本支持逗号语法。

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	?	?	?	?

See also

• Related CSS properties: text-overflow, white-space, overflow-x, overflow-y, overflow, display, position