网页中的渲染是由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. vagrant（二）配置文件vagrantfile详解 以及安装php、nginx、mysql

    上一篇文章完整的讲叙了如何安装一个vagrant的环境.这里主要说一说vagrant的配置文件Vagrantfile. 一 配置详解 在我们的开发目录下有一个文件Vagrantfile,里面包含有大量 ...

  2. notepad++ 安装 hex_editor 十六进制查看插件

    1.到 https://github.com/chcg/NPP_HexEdit/releases 去下载相应的文件,注意32位和64位的区别 2.点击notepad++的设置--->导入--&g ...

  3. Linux服务的安装与使用

    Spotlight on Unix 监控Linux服务器的安装与使用 详细请看:https://spotlight-on-unix.software.informer.com/download/#do ...

  4. springmvc 的 @PathVariable

    @PathVariable映射 URL 绑定的占位符 通过 @PathVariable 可以将 URL 中占位符参数绑定到控 •制器处理方法的入参中:URL 中的 {xxx} 占位符可以通过@Path ...

  5. BDE(一款数据库引擎，通过它可以连接不同数据库)

    BDE(Borland Database Engine)是Inprise公司的数据库引擎,它结合了SQL Links允许程序员通过它能够连接到各种不同的数据库.BDE是BORLAND 数据库引擎的缩写 ...

  6. express中 使用session与cookie

    1.express如何使用session与cookie : https://www.jianshu.com/p/1839e482274e  或  https://www.cnblogs.com/chy ...

  7. AsyncTask2

    参考: AsyncTask - 简书http://www.jianshu.com/p/3b839d7a3fcf 前言 在android应用开发过程中,我们需要是时刻注意保证应用程序的稳定和UI操作响应 ...

  8. python slot

    每个实例包含一个字典,slot 让实例变成tup 或list,减少内存,但不能再增加属性 For classes that primarily serve as simple data structu ...

  9. wsl和windows相互访问文件夹

    How to access Windows folders from Bash on Ubuntu on Windows You'll find the Windows C:\ structure a ...

  10. linux显示文本文件指定行数的数据

    sed -n '2,4p' /core/home_info.txt 显示这个txt的2-4行,此外还有 cat /core/home_info.txt |   tail -n 1000:显示最后100 ...