• CSS属性clip


    http://blog.sina.com.cn/s/blog_68a1582d0100kp59.html

    CSS属性中有个裁剪属性clip,其实我对这个属性一点都不感冒,因为我感觉它好像没啥用处,但是前几天我同学问我这个属性是啥意思,我就是说裁剪的意思,后来他又问我更具体的我就不大知道了,于是我就研究一番,发现此属性的兼容性很有问题,下面详解一下。

    style=“clip : auto | rect ( number number number number )”

    clip 属性:
      clip : auto | rect ( number number number number )
           参数:
           auto:对象无剪切
      rect ( number number number number ) :
      依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换,即此边不剪切
      说明:
      检索或设置对象的可视区域。区域外的部分是透明的。
      必须将position的值设为absolute,此属性方可使用。

    以上解释的很清楚吧,但是用来起你就会发现此属性并不那么听话。
    比如 你要裁剪一个div,你这样写 clip:rect(0 100 100 0),大眼一看没什么错吧,在Dreamweaver里也正常,但是当你浏览的时候,才发现裁剪不管用,因为这个我研究了半个小时,终于发现:

    在一个网页声明文档类型的情况下:
    clip:rect(0px 100px 100px 0px) (空格单位)这种写法兼容所有浏览器(IE、Firefox、Chrome)
    clip:rect(0px, 100px, 100px, 0px) (逗号空格单位) 这种写法只适用于Firefox
    clip:rect(0px,100px,100px,0px)   (逗号单位) 这种写法不兼容任何浏览器
    clip:rect(0,100,100,0)   (逗号) 这种写法不兼容任何浏览器


    clip剪切图片
    clip:rect(0px 100px 100px 0px)
    从上剪切0
    从右剪切100
    从下剪切100
    从左剪切0
    剪切:不要的
  • 相关阅读:
    hdu6007 Mr. Panda and Crystal 最短路+完全背包
    ID生成器的一种可扩展实现方案
    使用PUT方法上传文件无法工作原因分析
    负载均衡算法
    父类和子类属性覆盖的各种情况分析
    java functional syntax overview
    Starter Set of Functional Interfaces
    application/xml和text/xml的区别
    mime type 概要介绍
    spring mvc 详细执行流程
  • 原文地址:https://www.cnblogs.com/yanbinliu/p/3657117.html
Copyright © 2020-2023  润新知