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
剪切:不要的

CSS属性clip的更多相关文章

  1. 关于CSS属性clip在手机浏览器端的兼容性问题

    由于自己的6坏了拿去修了所以这两天使用了同事一只山寨安卓机和自己早年的小4,在今天的页面测试中,对于img中进行clip操作在这两台机子中均不能实现,后借用同事的6发现clip能正常展现,其中安卓版本 ...

  2. 换行的css属性

    //正常换行  word-break:keep-all;word-wrap:normal; //下面这行是自动换行  word-break:break-all;word-wrap:break-word ...

  3. CSS裁剪clip

    × 目录 [1]定义 [2]RECT [3]应用 前面的话 CSS裁剪clip这个属性平时用的不多,但其实它并不是CSS3的新属性,很早就开始出现了.本文将介绍关于clip属性的相关知识 定义 一个绝 ...

  4. 十个实用但IE不支持的CSS属性

    对IE浏览器尤其是IE6的抱怨基本已进入麻痹状态,偶尔甚至产生非常消极的想法:这个世界只有一个浏览器就好了,哪怕这唯一的浏览器就是IE6.当然,这样的想法是非常病态的,马上打消.本文里面,介绍了10个 ...

  5. CSS属性一览

    CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...

  6. 用css2属性clip实现网页进度条

    前言 看了网上一些关于网页进度条样式的资料,有很多方式实现,针对其展现形式,有用图片的,有用css2属性clip,有用flash的,本人就学会了一种,下面就简单来介绍一下. css2的属性clip 如 ...

  7. 整理 W3CSchool 常用的CSS属性列表

    近期教学给学员总结常用的CSS属性,方便学习查询,正好发上来也给大家分享一下,O(∩_∩)O. 摘选自:http://www.w3cschool.com.cn/ 表格最右列的数字标识支持的CSS最低版 ...

  8. 简明CSS属性:定位

    简明CSS属性:定位 第一话 定位 (Positioning) 关键词:position/z-index/top/bottom/right/left/clip POSITION 该属性用来决定元素在页 ...

  9. css属性分类介绍

    css属性分类介绍 CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position ...

随机推荐

  1. Python-S9-Day89_stark总结

    01 Stark总结 02 ORM总结 03 上节作业 04 Stark组件之查看页面表头 05 list_display_links 06 stark组件之添加页面 07 编辑删除页面 01 Sta ...

  2. wordpress 区分多语言站点

    $blog_title = get_bloginfo( 'name' ); $table_name = ''; if ( $blog_title == 'Driver Easy' ) { $table ...

  3. Leetcode 643.子数组最大平均数I

    子数组最大平均数I 给定 n 个整数,找出平均数最大且长度为 k 的连续子数组,并输出该最大平均数. 示例 1: 输入: [1,12,-5,-6,50,3], k = 4 输出: 12.75 解释: ...

  4. svm常用核函数

    SVM核函数的选择对于其性能的表现有至关重要的作用,尤其是针对那些线性不可分的数据,因此核函数的选择在SVM算法中就显得至关重要.对于核技巧我们知道,其目的是希望通过将输入空间内线性不可分的数据映射到 ...

  5. redhat--1

    ---------------- ---------------- 免密码ssh远程登录设置 . In host1, copy the ssh-key to the host2 hosts # ssh ...

  6. BZOJ 1051:[HAOI2006]受欢迎的牛(强连通分量)

    受欢迎的牛Description每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这种关系是具有传递性的,如果A认为B受欢迎,B认为C受欢迎,那么 ...

  7. vmware esxi 查看网卡、Raid卡驱动

    vmware esxi 查看网卡.Raid卡驱动 http://blog.51cto.com/adamcrab/1942763 查看网卡 [root@localhost:~] esxcfg-nics  ...

  8. BZOJ2123 [Sdoi2013]森林 【主席树 + 启发式合并】

    题目 输入格式 第一行包含一个正整数testcase,表示当前测试数据的测试点编号.保证1≤testcase≤20. 第二行包含三个整数N,M,T,分别表示节点数.初始边数.操作数.第三行包含N个非负 ...

  9. LVS Mode&Method

    LVS NAT 模式: Summary: 普通的NAT模式为DNAT,即只更改目的地址,不改源端口. LVS在转发报文时,将Client的源IP透传给Server,类似于透明传输. 优点: 1. 可提 ...

  10. RocketMq使用注意事项

    Topic 一个Topic是一个主题.一个系统中,我们可以将消息划成Topic,这样,将不同的消息发送到不同的queue. Queue 一个topic下,我们可以设置多个queue,每个queue就是 ...