clip
Deprecated
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;
值
形式定义
形式语法
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);
}
结果
规范
| 规范 |
|---|
| CSS Masking Module Level 1 # propdef-clip |
浏览器兼容性
参见
- Related CSS properties:
text-overflow,white-space,overflow-x,overflow-y,overflow,display,position