mozilla
您的搜索结果

    clip

    概述

    clip 属性定义了元素的哪一部分是可见的。clip 属性只适用于 position:absolute 的元素。

    • 初始值 auto
    • 适用元素 absolutely positioned elements
    • 可继承 no
    • 适用媒体 visual
    • 计算值 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
    • 可动画 yes, as a rectangle
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    语法

    形式语法: <shape> | auto
    
    clip: rect(1px, 10em, 3rem, 2ch)
    clip: auto
    
    clip: inherit

    <shape>
    一个矩形 <shape>
    rect(<top>, <right>, <bottom>, <left>)   /* 标准语法 */
    
    rect(<top> <right> <bottom> <left>)      /* 向后兼容语法 */
    <top><bottom> 指定相对于盒子上边框边界 的偏移,<right><left> 指定了相对于盒子左边框边界 的偏移。
    <top><right><bottom>, 和 <left> 的值可以是 <length> 值或 auto
    auto
    元素不裁剪(默认值)

    示例

    p { border:dotted;  position:relative; }
    
    #img2 {
      position:absolute;  left:263px;
    
      clip: rect(40px, 200px, 150px, 30px); 
      /* 标准语法,Internet Explorer 4-7 不支持 */
    }
    
    #img3 {
      position: absolute; left:526px;
    
      clip: rect(40px  200px  150px  30px);
      /* 非标准语法,但是包括火狐与 IE 在内的主要浏览器均支持 */
    }

    hut.jpg hut.jpg hut.jpg

    规范

    Specification Status Comment
    CSS Transitions Working Draft Defines clip as animatable.
    CSS Level 2 (Revision 1) Recommendation  

    浏览器兼容性

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 1.0 1.0 (1.0) 4.0 7.0 1.0 (85)
    8.0
    该版本支持逗号语法。
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? ? ? ? ?

    See also

    文档标签和贡献者

    此页面的贡献者有: teoli, sunnylost
    最后编辑者: teoli,