CSS学习札记-clip属性

时间:2017-07-21 星期五

如果图像大于包含它的元素,可以使用clip属性的rect属性关键字来进行一定的裁剪。

 #clip属性的关键字

auto:  是默认值,不应用任何剪裁。

rect:  以矩形进行裁剪,rect(top right bottom left)

inherit: 不支持ie什么的,理论上应该是从父元素继承 clip 属性的值

#rect属性关键词介绍

真正有用到的可能会是rect属性,rect属性中的top->right->bottom->left也是和border-width等等类似的顺时针方向给出定义的值的,只是这里的top值是指裁剪时距离原图的上边界的px, right是指裁剪时距离原图左边界的px,bottom是指裁剪时距离原图的上边界的px,left是指裁剪时距离原图左边界的px。

#rect使用示例

      1:未使用clip时

    

     

       2:使用clip后

      

     

#tips:如果同时使用了overflow属性,或者position未设置为absolute则不会生效clip属性设定

滚去继续学习~

猜你喜欢

转载自blog.csdn.net/orange_612/article/details/75588575
今日推荐