clip

已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

概述

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

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

初始值auto
适用元素absolutely positioned elements
是否是继承属性否
计算值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 typea rectangle

语法

形式语法: 

clip = 
  <rect()>  |
  auto      

<rect()> = 
  rect( [ <length-percentage> | auto ]{4} [ round <'border-radius'> ]? )  

<length-percentage> = 
  <length>      |
  <percentage>  

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

clip: inherit

值

<shape>

一个矩形 <shape> (en-US)

css

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

或

css

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

<top> 和 <bottom> 指定相对于盒子上边框边界 的偏移，<right> 和 <left> 指定了相对于盒子左边框边界 的偏移。 <top>、<right>、<bottom> 和 <left> 的值可以是 <length> 值或 auto。

auto

元素不裁剪 (默认值)

示例

裁剪图像

HTML

html

<p class="dotted-border">
  <img
    src="macarons.png"
    title="Original graphic" />
  <img
    id="top-left"
    src="macarons.png"
    title="Graphic clipped to upper left" />
  <img
    id="middle"
    src="macarons.png"
    title="Graphic clipped towards middle" />
  <img
    id="bottom-right"
    src="macarons.png"
    title="Graphic clipped to bottom right" />
</p>

CSS

css

.dotted-border {
  border: dotted;
  position: relative;
  width: 390px;
  height: 400px;
}

#top-left,
#middle,
#bottom-right {
  position: absolute;
  top: 0;
}

#top-left {
  left: 400px;
  clip: rect(0, 130px, 90px, 0);
}

#middle {
  left: 270px;
  clip: rect(100px, 260px, 190px, 130px);
}

#bottom-right {
  left: 140px;
  clip: rect(200px, 390px, 290px, 260px);
}

结果

规范

Specification
CSS Masking Module Level 1
# clip-property

浏览器兼容性

BCD tables only load in the browser

参见