网页中的渲染是由CSS来实现，CSS2就不说了，那个没得说的，最常用的就是个颜色布局什么的。

CSS3

自从有了CSS3，相比CSS2变得更具有活力了，CSS3没有什么方法函数的，它跟CSS2一样也是属性值得表现，所有JS没学好的同学，可以用CSS3代替JS，当然CSS3现在还没有一个标准，但是已有的几个标签，已经被业界多公认，我会在下面介绍几个，如果你想要做一个非常完美的网页的话，单纯的CSS3是不够的，有许多的动画效果是要JS来实现的，用CSS3来实现的话，效果不是很好，最重要的是CSS是不兼容IE的，这个鸡肋，不得不使我们开发人员学习JS。

clip

这个属性并不是CSS3里面的，但是这个属性我们对网站的优化，很有帮助。

在我们开发人员，看到网页的小图标是，想扣下来它的图片，结果会发现这张图片不是单一的，而是很长很大的一张图片，你所要的图片只是其中的一个图片，那么这个时候我们用这个属性来剪贴图片，得到你所需要的那个图标。

clip：rect(top,right,bottom,left);

这个属性有一个rect方法，里面有4个属性，对于这四个属性，大家可能不陌生，会不会想到border,margin,padding呢？不过这border这些属性是不同的，这里的四个属性是坐标的偏移长度。

这个方法必须要和绝对定位一起使用

例如：

img{

position:absolute;

clip:rect(80px,20px,100px,0px,)

}

<body>

<img src="icon.png"  width='20'height= '200'>

</body>

而这个元素的偏移长度都是已图片的左上角（0,0）坐标为基准的。

教大家一个小窍门，如果你暂时使用不来的话，首先设置这个属性的四个值为auto，也就是默认的不切割。然后一个个的试，你会发现很简单

第一个参数就是top的值了，左上角到图片上部的距离

第二个参数就是right的值了，左上角到图片右部的距离

第三个就是bottom的值了，左上角到图片最底部的距离

第四个就是left的值了，左上角到图片向左偏移的距离了。

如图：

这个图就是网页中的图片，而我所要的就是腾讯微博那个图标，不用打架PS切片，用CSS实现，为了使得大家清楚，我让背景成红色

这就是所需要的代码

最终效果，而其他的是被overflow：hidden

Clip的更多相关文章

  1. clip:rect矩形剪裁

    clip:rect(top right bottom left);依据上-右-下-左的顺序提供自图片左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换. 矩形剪裁 还需要绝对定位 ...

  2. clip 属性剪裁绝对定位元素

    如果left >= right或者bottom <= top,则元素会被完全裁掉而不可见,即“隐藏”.通过这种方式隐藏的元素是可以被屏幕阅读器等辅助设备识别的,从而提高了页面的可用性. I ...

  3. CSS中的text-overflow:clip|ellipsis的使用

    如果想让某个容器(div或者li或者...块级元素)显示一行文字,当文字内容过多时,不换行,而是出现...,可以使用text-overflow:clip|ellipsis 基本语法:text-over ...

  4. 批量Clip

    没有建立对应dataset,直接生成featureclass,主要是工作中没几个dataset. # -*- coding: utf-8 -*-__author__ = 'tanshuai' impo ...

  5. GP调用arctoolbox 以Clip为例

    GP的功能非常强大,也是GIS建模的一个很重要的工具.在Arcengine中,实现Clip功能很多种方法,可以用IBasicGeoprocessor的clip方法,但是GP无疑是最简单的. publi ...

  6. CSS图片裁剪Clip

    CSS Clip 裁剪 可以用它来裁剪一张图片噢. 我们来裁剪一下Google图标,把G字给裁剪下来. 注意这个clip得配合绝对定位才能使用,不然不起效果. rect (top, right, bo ...

  7. CSS裁剪clip

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

  8. 木耳听歌记---Clip+安装Rockbox

    黑五嫌着无聊,在什么值得买的诱惑下从美国亚马逊买了一个Clip+ 8GB版本,不为别的,就为了一直听别人说可以装Rockbox,谁让咱的魅族MX2无法安装这听歌神器来. 转运过程就不说了, 历时一个多 ...

  9. 用clip剪裁实现半圆

    定义和用法 clip 属性剪裁绝对定位元素. 说明 这个属性用于定义一个剪裁矩形.对于一个绝对定义元素,在这个矩形内的内容才可见.出了这个剪裁区域的内容会根据 overflow 的值来处理.剪裁区域可 ...

  10. html5中的clip

    定义和用法 clip() 方法从原始画布中剪切任意形状和尺寸. 提示:一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域).您也可以在使用 clip() 方法前通 ...

随机推荐

  1. python基础：11.列表对象属性排序

    def __lt__ def __gt__ def __repr__

  2. 人生苦短_我用Python_类与对象的概念_006

    Python类与对象的概念类和对象--->万事万物都对象物以类聚.人以群分 --->?划分标准性别分 男女 中性成绩分 优秀 良好 不及格 类->根据类的属性来划分类的实例-> ...

  3. 什么是ppa

    What is ppa? PPAs are for non standard software/updates. They are generally used by people who want ...

  4. 【leetcode】820. Short Encoding of Words

    题目如下: 解题思路:本题考查就是找出一个单词是不是另外一个单词的后缀,如果是的话,就可以Short Encode.所以,我们可以把words中每个单词倒置后排序,然后遍历数组,每个元素只要和其后面相 ...

  5. 解决如何通过循环来使用数据库的值设置jsp的select标签的option值

    Select 处的代码: <select name="position"> <span style="white-space:pre"> ...

  6. Java自定义注解学习

    1.定义一个枚举类,后面自定义注解时使用 package cn.tx.annotation.enums; /** * 定义枚举类型 * @author Administrator * */ publi ...

  7. springMVC带参数请求重定向

    SpirngMVC返回逻辑视图名 可以分下面几种情况: 1. servlet进行请求转发,返回到jsp页面,如  return "index.jsp" ; 2. servlet 返 ...

  8. k-近邻算法（kNN）完整代码

    from numpy import *#科学计算包 from numpy import tile from numpy import zeros import operator #运算符模块 impo ...

  9. excle里边的数据怎么导入oracle数据库

    方式一:(不正式) select出的列数与已经准备好的excle中的列数相同.select  xh,name from 表名 where xh = 'ghf' for update;  (查不到任何结 ...

  10. [HDU2276]Kiki & Little Kiki 2

    题目:Kiki & Little Kiki 2 链接:http://acm.hdu.edu.cn/showproblem.php?pid=2276 分析: 1)如果前一盏灯亮着,则改变这一盏灯 ...