网页中的渲染是由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. 更好的在 Git 项目中保存大文件(Git LFS 的使用)

    珠玉在前, 大家可以参考 Git LFS的使用 - 简书 为什么要用 Git LFS 原有的 Git 是文本层面的版本控制, 为代码这种小文件设计的, 保存大文件会导致 repo 非常臃肿, push ...

  2. python+selenium自动化框架搭建

    环境及使用软件信息 python 3 selenium 3.13.0 xlrd 1.1.0 chromedriver HTMLTestRunner 说明: selenium/xlrd只需要再pytho ...

  3. java连接远程服务器并执行命令

    导入必要的jar包 <dependency>  <groupId>ch.ethz.ganymed</groupId> <artifactId>ganym ...

  4. vfs之mount()

    首先明确一点,mount是vfs层的操作． 它的核心是从设备(可能是一个分区)上读出一个super block,把这个分区对应的文件系统的vfs函数表注册到super block的sb_opearti ...

  5. Appium环境搭建（Appium库的安装）

    Appium环境搭建 谷歌驱动和对照:注意:64位向下兼容,直接下载32位的就可以啦,亲测可用. https://blog.csdn.net/allthewayforward/article/deta ...

  6. 【Flutter学习】之button按钮

    一,概述 由于Flutter是跨平台的,所以有适用于Android和iOS的两种风格的组件.一套是Google极力推崇的Material,一套是iOS的Cupertino风格的组件.无论哪种风格,都是 ...

  7. 【Java】时间戳与Date相互转换

    时间戳转Date public static void main(String[] args) { // 10位的秒级别的时间戳 long time1 = 1527767665; String res ...

  8. appium 安装

    1.npm安装: cmd——cnpm install -g appium 卸载: cmd——npm uninstall -g appium 2.下载安装包安装: Appium server: 1. A ...

  9. LUOGU P4088 [USACO18FEB]Slingshot(线段树)

    传送门 解题思路 推了推式子发现是个二维数点,想了想似乎排序加线段树难写,就写了个树套树,结果写完看见空间才\(128M\)..各种奇技淫巧卡空间还是\(MLE\)到天上.后来只好乖乖的写排序+线段树 ...

  10. NGINX配置之二: nginx location proxy_pass 后面的url 加与不加/的区别.

    这里我们分4种情况讨论 这里我们请求的网站为:192.168.1.123:80/static/a.html 整个配置文件是 server{ port 80, server name 192.168.1 ...