clip

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

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

/* 关键字值 */
clip: auto;
/* <shape> 值 */
clip: rect(1px, 10em, 3rem, 2ch);
/* 全局值 */
clip: inherit;
clip: initial;
clip: revert;
clip: revert-layer;
clip: unset;

<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>

.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);
}

帮助改进 MDN

此页面最后更新于 2025年11月3日,由 MDN 贡献者更新。