zoukankan      html  css  js  c++  java
  • 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
    剪切:不要的
  • 相关阅读:
    ava新手入门详细介绍
    FreeRTOS源代码的编程标准与命名约定
    Java基础学习笔记
    如何提高单片机C语言代码效率
    java三大框架介绍
    Java代码优化六大原则
    单片机C语言基础编程源码六则2
    单片机C语言基础编程源码六则
    Java编程代码性能优化总结
    SAP ALV报表模板
  • 原文地址:https://www.cnblogs.com/yanbinliu/p/3657117.html
Copyright © 2011-2022 走看看