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
剪切:不要的
CSS属性clip的更多相关文章
- 关于CSS属性clip在手机浏览器端的兼容性问题
由于自己的6坏了拿去修了所以这两天使用了同事一只山寨安卓机和自己早年的小4,在今天的页面测试中,对于img中进行clip操作在这两台机子中均不能实现,后借用同事的6发现clip能正常展现,其中安卓版本 ...
- 换行的css属性
//正常换行 word-break:keep-all;word-wrap:normal; //下面这行是自动换行 word-break:break-all;word-wrap:break-word ...
- CSS裁剪clip
× 目录 [1]定义 [2]RECT [3]应用 前面的话 CSS裁剪clip这个属性平时用的不多,但其实它并不是CSS3的新属性,很早就开始出现了.本文将介绍关于clip属性的相关知识 定义 一个绝 ...
- 十个实用但IE不支持的CSS属性
对IE浏览器尤其是IE6的抱怨基本已进入麻痹状态,偶尔甚至产生非常消极的想法:这个世界只有一个浏览器就好了,哪怕这唯一的浏览器就是IE6.当然,这样的想法是非常病态的,马上打消.本文里面,介绍了10个 ...
- CSS属性一览
CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...
- 用css2属性clip实现网页进度条
前言 看了网上一些关于网页进度条样式的资料,有很多方式实现,针对其展现形式,有用图片的,有用css2属性clip,有用flash的,本人就学会了一种,下面就简单来介绍一下. css2的属性clip 如 ...
- 整理 W3CSchool 常用的CSS属性列表
近期教学给学员总结常用的CSS属性,方便学习查询,正好发上来也给大家分享一下,O(∩_∩)O. 摘选自:http://www.w3cschool.com.cn/ 表格最右列的数字标识支持的CSS最低版 ...
- 简明CSS属性:定位
简明CSS属性:定位 第一话 定位 (Positioning) 关键词:position/z-index/top/bottom/right/left/clip POSITION 该属性用来决定元素在页 ...
- css属性分类介绍
css属性分类介绍 CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position ...
随机推荐
- Careercup - Microsoft面试题 - 5672369481842688
2014-05-12 06:27 题目链接 原题: Find the max height of a binary tree. 题目:计算二叉树的最大高度. 解法:最大高度?高度不就是最深的叶子节点到 ...
- hnust 搬书
问题 G: 搬书 时间限制: 1 Sec 内存限制: 128 MB提交: 576 解决: 49[提交][状态][讨论版] 题目描述 XCQ队长要退役啦,由于队长常年刷题,机位上摆着各类算法书,一个 ...
- 【LeetCode】Remove Duplicates from Sorted List(删除排序链表中的重复元素)
这道题是LeetCode里的第83道题. 题目描述: 给定一个排序链表,删除所有重复的元素,使得每个元素只出现一次. 示例 1: 输入: 1->1->2 输出: 1->2 示例 2: ...
- 深入学习之mysql(四)聚合函数
聚合函数:COUNT统计记录的条数.SUM求和函数.AVG求平均值.MAX求最大值.MIN求最小值 一.COUNT练习: 1.统计学校一共有多少个学生: mysql> SELECT COUN ...
- csapp 深入理解计算机系统 csapp.h csapp.c文件配置
转载自 http://condor.depaul.edu/glancast/374class/docs/csapp_compile_guide.html Compiling with the CS ...
- 历史Linux镜像的问题修复方案
历史Linux镜像创建的ECS云服务器,可能存在NTP没有配置,YUM没有配置,还可能存在最近暴漏较高的安全漏洞,请按照以下步骤进行修复,可以让您的云服务器更加安全,还可以使用阿里云提供的YUM服务进 ...
- 【Luogu】P4462异或序列(莫队)
题目链接 观察什么时候x到y之间那一段可以被统计 xorsum[x-1]^xorsum[y]=k xorsum[x-1]=xorsum[y]^k||xorsum[y]=xorsum[x-1]^k 莫队 ...
- SolrCloud在linux上的搭建
SolrCloud在linux上的搭建 1.环境准备 三台虚拟机的环境准备: 1. 更改主机名 2. 关闭selinux 3. 关闭防火墙 4. 更改主机名与ip地址的映射 5. 时钟同步 6. ss ...
- [暑假集训--数论]poj2034 Anti-prime Sequences
Given a sequence of consecutive integers n,n+1,n+2,...,m, an anti-prime sequence is a rearrangement ...
- python(5)-- 函数
python 函数 定义:函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 使用好处:函数能提高应用的模块性,和代码的重复利用率. 分类:(1)python 内建函数:pytho ...