网页中的渲染是由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. BZOJ5415 [NOI2018] 归程

    今天也要踏上归程了呢~(题外话 kruskal重构树!当时就听学长们说过是重构树辣所以做起来也很快233 就是我们按照a建最大生成树 这样话呢我们就可以通过生成树走到尽量多的点啦 然后呢就是从这个子树 ...

  2. python运行windows终端程序

    其实是用python控制windows里的shell 1.windows有PowerShell,可以通过搜索打开,运行python不需要打开shell 2.用python里的subprocess函数, ...

  3. php rtrim()函数 语法

    php rtrim()函数 语法 rtrim()函数怎么用? php rtrim()函数用于删除字符串右边的空格或其他预定义字符,语法是rtrim(string,charlist),返回经过charl ...

  4. webpack使用问题记录

    1.版本问题 webpack的安装并不是越新越好.当使用最新版本时不使用配置文件,直接编译不生成文件甚至报错:使用3.12版本时编译文件可以成功但是不生成新文件:使用 3.5.3 版本时成功且生成新文 ...

  5. Python基础教程（021）--Pycharm简介

    前言 学习Pycharm开发工具 内容 项目:就是一个功能复杂的软件 目标 必须掌握的工具

  6. C# 简单软件有效期注册的实现

    ◆需求:公司一直以来对开发的产品都没有进行使用时间的控制,要么就是将日期限制写死在程序里面,每次都要编译新程序再发给客户,很不方便.于是公司让我写个模块,要求如下:1.无论哪个新开发的程序只要调用这个 ...

  7. Map-Amap：目录

    ylbtech-Map-Amap:目录 1. 高德地图返回顶部 1. https://www.amap.com/ 2. 2.  高德地图App返回顶部 1. http://www.autonavi.c ...

  8. T1373：鱼塘钓鱼(fishing）

    原题链接:1373:鱼塘钓鱼(fishing) 解题思路: 由于在走路时,鱼的数量不会减少,那我们此时可以先减去路上可能花掉的时间,用剩下的时间来找最多的鱼,然后从左向右走,k枚举能到达的最远的鱼塘, ...

  9. HDU 1028 Ignatius and the Princess III (动态规划)

    题目链接:HDU 1028 Problem Description "Well, it seems the first problem is too easy. I will let you ...

  10. PAT_A1069#The Black Hole of Numbers

    Source: PAT A1069 The Black Hole of Numbers (20 分) Description: For any 4-digit integer except the o ...