clip
已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它,但也许已从相关的 web 标准中移除,也许正准备移除或出于兼容性而保留。请尽量不要使用该特性,并更新现有的代码;参见本页面底部的兼容性表格以指导你作出决定。请注意,该特性随时可能无法正常工作。
概述
clip
属性定义了元素的哪一部分是可见的。clip
属性只适用于 position:absolute
的元素。
警告: 这个属性已被废弃。建议使用 clip-path
。
语法
值
<shape>
-
一个矩形
<shape>
(en-US)css
rect(<top>, <right>, <bottom>, <left>) /* 标准语法 */
或
css
rect(<top> <right> <bottom> <left>) /* 向后兼容语法 */
<top>
和<bottom>
指定相对于盒子上边框边界 的偏移,<right>
和<left>
指定了相对于盒子左边框边界 的偏移。<top>
、<right>
、<bottom>
和<left>
的值可以是<length>
值或auto
。 auto
-
元素不裁剪 (默认值)
示例
裁剪图像
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 |
浏览器兼容性
BCD tables only load in the browser
参见
- Related CSS properties:
text-overflow
,white-space
,overflow-x
,overflow-y
,overflow
,display
,position