1、clip的概述:

clip是修剪之意

clip有4个属性值：inherit auto rect(20px,40px,60px,0px) !important 其中有作用的仅rect这个属性值，着重理解rect中这个属性，

rect可以设置4个值，分别代表（top，right，bottom，left）

例如一张300px*300px的画布，需要在这一块画布上进行剪裁，且rect里面的值，分别设置为rect(20px,280px,280px,20px);会出现什么样的结果呢~什么都不会出现

2、使用clip的注意点：

　　2.1、需要配合position：absolute使用

3、结果：配合使用了position：absolute后，会出现什么样的结果呢~

截取的部分为：绿色那部分

clip原理的更多相关文章

  1. Python+moviepy音视频剪辑：视频帧数据的本质、Clip的fl方法进行变换处理的原理以及滚屏案例

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt+moviepy音视频剪辑实战 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一. ...

  2. css3圆形百分比进度条的实现原理

    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...

  3. Cesium原理篇：3最长的一帧之地形(4：重采样)

           地形部分的原理介绍的差不多了,但之前还有一个刻意忽略的地方,就是地形的重采样.通俗的讲,如果当前Tile没有地形数据的话,则会从他父类的地形数据中取它所对应的四分之一的地形数据.打个比方 ...

  4. paip.关于动画特效原理 html js 框架总结

    paip.关于动画特效原理 html js 框架总结 1. 动画框架的来源:flex,jqueryui 3 2. 特效的分类 3 2.1. Property effects 动态改变一个或多个目标对象 ...

  5. Projective Texture的原理与实现

    http://blog.csdn.net/xukunn1226/article/details/775644 Projective Texture是比较常见的一种技术,实现起来代码也就区区的不过百行, ...

  6. NGUI的原理机制：深入剖析UIPanel,UIWidget,UIDrawCall底层原理

    这是我去搜狐畅游面试时,面试官问的一个问题.问NGUI的机制原理是什么?就是这个插件是根据什么写出来的.当时没答上来,下面是我从转载过来的,可以研究研究. 之前项目中用的NGUI的版本是3.0.7 f ...

  7. CSS clip:rect矩形剪裁功能及一些应用介绍

    CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...

  8. Unity Shader - 消融效果原理与变体

    基本原理与实现 主要使用噪声和透明度测试,从噪声图中读取某个通道的值,然后使用该值进行透明度测试. 主要代码如下: fixed cutout = tex2D(_NoiseTex, i.uvNoiseT ...

  9. 阴影锥(shadow volume)原理与展望

    转记:找了不少关于shadow volume原理的资料,还是这个帖子讲解的一目了然,转帖在这里,方便查阅.引用链接:http://blog.donews.com/yyh/archive/2005/05 ...

随机推荐

  1. JDBC操作封装

    这两天学习了一下jdbc的封装,依据的是下面这篇 http://wenku.baidu.com/link?url=FaFDmQouYkKO24ApATHYmA5QzUcj-UE-7RSSZaBWPqk ...

  2. 十大算法 pagerank 傅里叶变换

    来源于最近阅读的一些链接 首先是介绍十大算法的 http://blog.jobbole.com/70639/ 然后是pageRank算法 http://blog.jobbole.com/23286/ ...

  3. Node.js（转） -- 临时来说还看不懂！

    转自:http://blog.jobbole.com/53736/ 本文由 伯乐在线 - Lellansin 翻译.未经许可,禁止转载!英文出处:toptal.欢迎加入翻译组. 介绍 JavaScri ...

  4. User cannot be resolved to a type

    出现 User cannot be resolved to a type 不知道具体问题出在哪里但是我经过将全路径输入并保存后错误消失 将User选上,然后点击保存就可以了! 最后我发现错误消失了!

  5. SPRING中事务的配置

    采用这种配置策略,完全可以避免增量式配置,所有的事务代理由系统自动创建.容器中的目标bean自动消失,避免需要使用嵌套bean来保证目标bean不可被访问.这 种配置方式依赖于Spring提供的bea ...

  6. BZOJ 1416: [NOI2006]神奇的口袋( 高精度 )

    把x1~xn当成是1~n, 答案是不会变的. 然后直接模拟就行了...... P.S 双倍经验... BZOJ1416 && BZOJ1498 -------------------- ...

  7. Demo 示例控制输入光标位置

    <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name="aut ...

  8. 精读《javascript高级程序设计》笔记二——变量、作用域、内存以及引用类型

    变量.作用域和内存问题 执行环境共有两种类型——全局和局部 作用域链会加长,有两种情况:try-catch语句的catch块,with语句. javascript没有块级作用域,即在if,for循环中 ...

  9. tr删除替换详解

    tr(translate缩写)主要用于删除文件中的控制字符,或进行字符转换. 语法:tr  [–c/d/s/t] [SET1] [SET2]    #SET1: 字符集1: SET2:字符集2 -c: ...

  10. Httpwatch 工具介绍

    一 概述: HttpWatch强大的网页数据分析工具.集成在Internet Explorer工具栏.包括网页摘要.Cookies管理.缓存管理.消息头发送/接受.字符查询.POST 数据和目录管理功 ...