网页中的渲染是由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. 牛客网NOIP赛前集训营-提高组（第六场）A-最长路

    题目描述 有一张 n 个点 m 条边的有向图,每条边上都带有一个字符,字符用一个数字表示. 求以每个点为起点的最长路,输出走过的边的字符构成的字符串的字典序最小的方案. 为了方便,你需要这样输出方案: ...

  2. 25.Java锁的深度化

    Java锁的深度化 悲观锁.乐观锁.排他锁 场景 当多个请求同时操作数据库时,首先将订单状态改为已支付,在金额加上200,在同时并发场景查询条件下,会造成重复通知. SQL: Update 悲观锁与乐 ...

  3. centos 6.5 安装 mysql 5.6.19

    首先要做点清洁工作,检查是否存在 mysql 相关的库或安装文件,有则删除 rpm -qa|grep -i mysql rpm -e --nodeps filename 如果是重新安装 mysql,还 ...

  4. 【leetcode】891. Sum of Subsequence Widths

    题目如下: 解题思路:题目定义的子序列宽度是最大值和最小值的差,因此可以忽略中间值.首先对数组排序,对于数组中任意一个元素,都可以成为子序列中的最大值和最小值而存在.例如数组[1,2,3,4,5,6] ...

  5. Git 最全命令使用

    git init test 创建并管理一个文件 Git add . 添加到暂存区 Git commit -M '开始的开始' 造了一颗后悔药 Git log 查看版本记录 Git status 查看当 ...

  6. 偏函数（partial）

    from functools import partial def add(a,b,c,d): return a+b+c+d add = partial(add,1,2) print(add(3,4) ...

  7. SSH框架整合-myeclipse

    项目结构   1.mysql数据库 stuinfo /* SQLyog 企业版 - MySQL GUI v8.14 MySQL - 5.5.40 : Database - stuinfo ****** ...

  8. 知道一个数组某个index对应的值 不知道下标的情况下删除该值

    for (index,item) in Arr.enumerated() { if item == item { Arr.remove(at: index) } } 更好的方法是用数组的filter尾 ...

  9. LintCode之各位相加

    题目描述: 我的代码 public class Solution { /* * @param num: a non-negative integer * @return: one digit */ p ...

  10. mybatis如何通过接口查找对应的mapper.xml及方法执行详解

    转:http://www.jb51.net/article/116402.htm 本文主要介绍的是关于mybatis通过接口查找对应mapper.xml及方法执行的相关内容,下面话不多说,来看看详细的 ...