clip
已弃用：此特性不再推荐。虽然某些浏览器可能仍然支持它，但它可能已经从相关的网络标准中删除，可能正在删除过程中，或者可能仅为兼容性目的而保留。请避免使用它，如果可能，请更新现有代码；请参阅本页底部的兼容性表格以指导您的决策。请注意，此特性可能随时停止工作。
警告： 建议作者使用 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;
值
rect()-
使用
rect()函数定义的矩形，形式为rect(<top>, <right>, <bottom>, <left>)。<top>和<bottom>值是从盒子内部顶部边框边缘的偏移量，而<right>和<left>是从盒子内部左侧边框边缘的偏移量，即内边距盒的范围。<top>、<right>、<bottom>和<left>的值可以是<length>或auto。如果任何一侧的值为auto，则元素将裁剪到该侧的内部边框边缘。
注意： 废弃的 clip 属性中使用的 rect() <shape> 函数与用于定义 CSS <basic-shape> 的 CSS rect() 函数不同。
auto-
元素不裁剪（默认）。这与
rect(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 蒙版模块 Level 1 # clip-property |
浏览器兼容性
加载中…