CSS参考手册
面具 | Masking
剪辑 | clip
已弃用
此功能已从Web标准中删除。虽然有些浏览器可能仍然支持它,但它正在被删除的过程中。如果可能,请避免使用它并更新现有代码;请参见兼容性表在这页的底部指导你的决定。请注意,此功能可能在任何时候停止工作。
clip
属性定义了元素的哪一部分是可见的。clip
属性只适用于position:absolute
的元素,即position:absolute
或position:fixed
...
/* Keyword value */
clip: auto;
/* <shape> values */
clip: rect(1px 10em 3rem 2ch);
clip: rect(1px, 10em, 3rem, 2ch);
/* Global values */
clip: inherit;
clip: initial;
clip: unset;
语法
警告:此属性不受欢迎。使用clip-path
相反。
Initial value |
auto |
---|---|
Applies to |
absolutely positioned elements |
Inherited |
no |
Media |
visual |
Computed value |
auto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the computed length otherwise |
Animation type |
a rectangle |
Canonical order |
the unique non-ambiguous order defined by the formal grammar |
值
<shape>
一个矩形<shape>
rect(<top>, <right>, <bottom>, <left>) /* 标准语法 */
或
rect(<top> <right> <bottom> <left>) /* 向后兼容语法 */
<top>
和<bottom>
指定相对于盒子上边框边界的偏移,<right>
和<left>
指定了相对于盒子左边框边界的偏移。<top>
,<right>
,<bottom>
, 和<left>
的值可以是<length>
值或auto
。
.如果任一边的值为auto
,元素被裁剪到那边的内边缘一侧。auto
元素默认不剪辑。请注意,这与rect(auto, auto, auto, auto)
着实不同,rect会剪辑到元素的内部边框边缘。
形式语法
<shape> | autowhere
<shape> = rect(<top>, <right>, <bottom>, <left>)
实例
.dotted-border {
border: dotted;
position: relative;
width: 536px;
height: 350px;
}
#top-left, #middle, #bottom-right {
position: absolute;
top: 0px;
}
#top-left {
left: 360px;
clip: rect(0px, 175px, 113px, 0px);
}
#middle {
left: 280px;
clip: rect(119px, 255px, 229px, 80px);
/* standard syntax, unsupported by Internet Explorer 4-7 */
}
#bottom-right {
left: 200px;
clip: rect(235px 335px 345px 160px);
/* non-standard syntax, but supported by all major browsers*/
}
<p class="dotted-border">
<img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic">
<img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left">
<img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle">
<img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right">
</p>
规格
Specification |
Status |
Comment |
---|---|---|
CSS Masking Module Level 1The definition of 'clip' in that specification. |
Candidate Recommendation |
Deprecates clip property, suggests clip-path as replacement. |
CSS TransitionsThe definition of 'clip' in that specification. |
Working Draft |
Defines clip as animatable. |
CSS Level 2 (Revision 1)The definition of 'clip' in that specification. |
Recommendation |
Initial definition. |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support |
1.0 |
(Yes) |
1.0 (1.0) |
4.01 |
7.0 |
1.0 (85)1 |
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|---|
Basic support |
? |
(Yes) |
? |
? |
? |
? |
面具 | Masking相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。