clip

已弃用：此功能不再推荐。尽管某些浏览器可能仍然支持它，但它可能已从相关的 Web 标准中删除，或者正在被删除，或者仅出于兼容性目的而保留。避免使用它，并尽可能更新现有代码；请参阅此页面底部的兼容性表，以指导您的决策。请注意，此功能可能会随时停止工作。

警告：在可能的情况下，鼓励作者改用更新的clip-path 属性。

clip CSS 属性定义元素的可见部分。clip 属性仅适用于绝对定位的元素，即具有position:absolute 或position:fixed 的元素。

语法

css
/* Keyword value */
clip: auto;

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

/* Global values */
clip: inherit;
clip: initial;
clip: revert;
clip: revert-layer;
clip: unset;

值

<shape>

一个矩形的<shape>，形式为rect(<top>, <right>, <bottom>, <left>)。<top> 和 <bottom> 值是从盒子的内部顶部边框边缘偏移的，而 <right> 和 <left> 值是从盒子的内部左侧边框边缘偏移的，也就是说，填充框的范围。

<top>、<right>、<bottom> 和 <left> 的值可以是 <length> 或 auto。如果任何一侧的值为 auto，则元素会被裁剪到该侧的内边框边缘。

auto

元素不裁剪（默认值）。这与 rect(auto, auto, auto, auto) 不同，后者会裁剪到元素的内边框边缘。

正式定义

初始值auto
应用于绝对定位元素
继承否
计算值如果指定为 auto 则为 auto，否则为一个具有四个值的矩形，每个值如果指定为 auto 则为 auto，否则为计算出的长度
动画类型一个 矩形

正式语法

clip = 
  <rect()>  |
  auto      

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

示例

裁剪图像

html
<p class="dotted-border">
  <img src="macarons.png" alt="Original graphic" />
  <img id="top-left" src="macarons.png" alt="Graphic clipped to upper left" />
  <img id="middle" src="macarons.png" alt="Graphic clipped towards middle" />
  <img
    id="bottom-right"
    src="macarons.png"
    alt="Graphic clipped to bottom right" />
</p>
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);
}

规范

规范
CSS 遮罩模块级别 1
# clip-property

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅