网页中的渲染是由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. Code Festival 2017 Qual B E Popping Balls

    传送门 神仙计数! 我的计数真的好差啊= = 不过这个题真的神仙 看了题解把整个过程在草稿纸上重写了一遍才想明白= =(一张草稿纸就没有了!!!) 计数的关键就是在于 枚举的有效性和独立性[不能重复计 ...

  2. 51nod 1605:棋盘问题

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1605 题目中最有用的点其实还是x必为奇数 #include& ...

  3. Idea的几个常用的

    sout+tab=   "System.out.println()" ctrl+alt+v=生成当前对象的实例 ctrl+shift+enter="(真个是真的牛哦)直接 ...

  4. mui滚动区域的实现

    mui框架实现页面中间区域滚动,头部和底部固定不动,要滚动的区域一定要有mui-scroll-wrapper 和 mui-scroll 包裹 <div class="mui-conte ...

  5. PHPthink 配置目录

    系统默认的配置文件目录就是应用目录(APP_PATH),也就是默认的application下面,并分为应用配置(整个应用有效)和模块配置(仅针对该模块有效). ├─application 应用目录 │ ...

  6. 「树的直径」BFS方法证明

    选定任意一个点u,从u开始BFS求出距离u最大的点s,再从s点出发BFS到距离s最大的点t,则dis(s,t)即为树的直径 证明 其实只要找到了树的直径的一个端点,再BFS找到最远点就一定是直径的另一 ...

  7. delphi 使用 InputBox、InputQuery 的启发

    使用 InputBox.InputQuery 的启发 看了 InputBox.InputQuery 函数实现的源码, 有些收获与心得... ------------------------------ ...

  8. 重温HTML和CSS3

    重温Web前端基础 本篇幅中着重文字,只是记录一些自己的见解,巩固下自身基础 网页结构是什么? 结构层 html 导航,列表,段文字,图片,链接,表示层 css 颜色,大小,位置,行为层 JavaSc ...

  9. mysql联合查询sql优化

    我们在使用mysql数据库时,经常会使用到mysql的联合查询,联合查询分为内连接和外连接,内连接查询结果是联合的表都存在匹配才会有结果,外连接则根据驱动表是否存在匹配来生成结果集. 这里使用mysq ...

  10. 杂项：JFB-权限设置

    ylbtech-杂项:JFB-权限设置 1. 家政经理返回顶部 1. if (UserContext.GetTeamId() == (int)UserType.Manager) { condition ...