clip
已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。
概述
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); } 结果
规范
| Specification |
|---|
| CSS Masking Module Level 1 # clip-property |
浏览器兼容性
Loading…
参见
- Related CSS properties:
text-overflow,white-space,overflow-x,overflow-y,overflow,display,position