clip

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

概述

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

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

语法

css
/* 关键字值 */
clip: auto;

/* <shape> 值 */
clip: rect(1px, 10em, 3rem, 2ch);

/* 全局值 */
clip: inherit;
clip: initial;
clip: revert;
clip: revert-layer;
clip: unset;

值

<shape>

一个矩形 <shape>

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

或

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

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

auto

元素不裁剪 (默认值)

形式定义

初始值auto
适用元素绝对定位元素
是否是继承属性否
计算值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

形式语法

clip = 
  <rect()>  |
  auto      

<rect()> = 
  rect( <top> , <right> , <bottom> , <left> )

示例

裁剪图像

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

浏览器兼容性

参见