clip | CSS

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

clip CSS property defines a visible portion of an element. The clip property applies only to absolutely positioned elements — that is, elements with position:absolute or position:fixed .

/* Keyword value */
clip: auto;
/* <shape> values */
clip: rect(1px, 10em, 3rem, 2ch);
/* Global values */
clip: inherit;
clip: initial;
clip: unset;

句法

注意： Where possible, authors are encouraged to use the newer clip-path 特性代替。

值

<<shape>()>: A rectangular <<shape>()> of the form rect(<top>, <right>, <bottom>, <left>) 。 <top> and <bottom> values are offsets from the inside top border edge of the box, while <right> and <left> are offsets from the inside left border edge of the box — that is, the extent of the padding box.; <top> , <right> , <bottom> ，和 <left> values may be either a <length> or auto . If any side's value is auto , the element is clipped to that side's inside border edge .
auto: The element does not clip (default). This is different from rect(auto, auto, auto, auto) , which clips to the element’s inside border edges.

形式定义

初始值	`auto`
适用于	absolutely positioned elements
继承	no
计算值	`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
动画类型	a rectangle

形式句法

<shape> | autowhere 
<shape> = rect(<top>, <right>, <bottom>, <left>)

范例

Clipping an image

CSS

.dotted-border {
  border: dotted;
  position: relative;
  width: 536px;
  height: 350px;
}
#top-left,
#middle,
#bottom-right {
  position: absolute;
  top: 0;
}
#top-left {
  left: 360px;
  clip: rect(0, 175px, 113px, 0);
}
#middle {
  left: 280px;
  clip: rect(119px, 255px, 229px, 80px);
}
#bottom-right {
  left: 200px;
  clip: rect(235px, 335px, 345px, 160px);
}

HTML

<p class="dotted-border">
  <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic">
  <img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left">
  <img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle">
  <img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right">
</p>

结果

规范

规范	状态	注释
CSS Masking Module Level 1 The definition of 'clip' in that specification.	候选推荐	Deprecates `clip` property, suggests `clip-path` as replacement.
CSS Level 2 (Revision 1) The definition of 'clip' in that specification.	推荐	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`clip` 弃用	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 4 注意事项完整支持 4 注意事项注意事项 Before Internet Explorer 7, Internet Explorer incorrectly interprets `clip: auto` as `clip: rect(auto, auto, auto, auto)` .	Opera 完整支持 7	Safari 完整支持 1 注意事项完整支持 1 注意事项注意事项 Safari incorrectly interprets `clip: auto` as `clip: rect(auto, auto, auto, auto)` .	WebView Android 完整支持 37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1 注意事项完整支持 1 注意事项注意事项 Safari incorrectly interprets `clip: auto` as `clip: rect(auto, auto, auto, auto)` .	Samsung Internet Android 完整支持 1.0

图例

完整支持
弃用。不要用于新网站。
见实现注意事项。

另请参阅

This property is deprecated. Use clip-path 代替。
Related CSS properties: text-overflow , white-space , overflow-x , overflow-y , overflow , display , position

元数据

最后修改： Sep 15, 2020

在此页

句法

值