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. C# 类型的创建

    类 类是最普通的引用类型,最简单的声明如下所示: class YourNameClass { } 更复杂的类可以拥有以下这些选项: 置于关键字class前面的:属性(attributes)与class ...

  2. python dict traversal

    rs=dict() rs['item1'] = 'item1' rs['item2'] = 'item2' for k,d in rs.items(): print k,d for k in rs.k ...

  3. php消息队列

    Memcache 一般用于缓存服务.但是很多时候,比如一个消息广播系统,需要一个消息队列.直接从数据库取消息,负载往往不行.如果将整个消息队列用一个key缓存到memcache里面.对于一个很大的消息 ...

  4. Android Spinner 下拉列表

    private Spinner spinner ;         private List<String> list ;         private ArrayAdapter< ...

  5. 【Chromium中文文档】安全浏览 -- Chrome中的警告都是怎么来的?

    安全浏览 转载请注明出处:https://ahangchen.gitbooks.io/chromium_doc_zh/content/zh//General_Architecture/SafeBrow ...

  6. In-System Debugger for 8051 Devices(ISD 8051单片机在线调试器)

    此文档包含了最新版本的说明及最近的更新特别是对 ISD51 的说明(用户手册没有此说明) Keil Software,Inc and Keil Elektronik GmbH保留所有此文件中涉及的信息 ...

  7. Navicat for mysql 导出sql文件 导入sql文件

    运行速度快 不受大小限制 安全高效

  8. hibernate中文查询时无查询结果

    原因很简单,问题在于我连接mysql用的url时,没有指定字符集,导致查询不到任何数据 问题出在 hibernate.xml配置文件中: 将 <property name="jdbcU ...

  9. javascript DOM,它到底是什么-------Day32

    这一晚上看的我是头疼不已啊,为什么呢? 终究是半路出家,我对javascript的理解仅仅停留在:调用javascript,改变页面样式,元素和实现一些事件的响应,尽管须要的时候可能会用,可是到底使用 ...

  10. KJFrameForAndroid框架学习----高效设置网络图片

    KJFrameForAndroid框架项目地址:https://github.com/kymjs/KJFrameForAndroid 或备用地址http://git.oschina.net/kymjs ...