clip原理

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后，会出现什么样的结果呢~

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

时间： 2024-08-11 03:46:06

clip原理的相关文章

碎裂效果尝试(canvas篇)

为什么会有这篇博文,因为昨天我的杯子碎了,同个办公室的人手机屏幕碎了……碎碎平安既然说的是碎裂效果,那什么是碎裂呢,看看生活中的总而言之就是完整的一块,碎成了好些块. 进入正题,canvas对于图像处理很强,毕竟直接操作像素,马赛克,翻转,二值化都很方便.但是经过我的一番尝试,说实话,canvas分割图像这方面还真挺麻烦的…… 当然可能我的实现思路有问题,绕了弯,如果有更好地方法请指教,万分感激讲了这么多,先看看几张gif,这样才有兴趣继续往下看嘛特地让其动了起来,录制gif有点卡,真实

【转】浏览器的渲染原理简介

How Browsers Work 这篇文章把浏览器的很多细节讲的很细,也有中文的翻译版本,现在转载的这篇是陈皓写的,目的的为了能在上班途中,或是坐马桶时就能读完,并能从中学会一些能用在工作上的东西. 浏览器工作大流程先看个图从图中,可以看到: 1) 浏览器会解析三个东西 * 一个 HTML/SVG/XHTML,事实上,Webkit 有三个C++的类对应这三类文档.解析这三种文件会产生一个DOM Tree * CSS,解析CSS会产生CSS规则树 * JavaScript 脚本,主要是通过

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

CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1565 一.长话短说 CSS中有一个属性叫做clip,为修剪,剪裁之意.配合其属性关键字rect可以实现元素的矩形裁剪效果.此属性安安稳稳地存在于CSS2.1中,且使用上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问

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

paip.关于动画特效原理 html js 框架总结 1. 动画框架的来源:flex,jqueryui 3 2. 特效的分类 3 2.1. Property effects 动态改变一个或多个目标对象的属性 (Animate.Fade, Resize, and AnimateColor) 4 2.2. Transform effects 缩入.旋转和位置的改变 .(Move, Rotate, and Scale) 4 2.3. Pixel-shader effects 主要是针对图片象素着色的动

NGUI所见即所得之深入剖析UIPanel,UIWidget,UIDrawCall底层原理

NGUI所见即所得之深入剖析UIPanel,UIWidget,UIDrawCall底层原理 By D.S.Qiu 尊重他人的劳动,支持原创,转载请注明出处:http.dsqiu.iteye.com 之前项目中用的NGUI的版本是3.0.7 f3,开始的时候感觉没有什么问题,直达最近项目UI的完成度比较高时,就突然出现掉帧很严重的现象,即使只有一个UI打开(其他都是active = false的情况下),打开profier,发现UIPanel LateUpdate 竟然占了CPU使用率的50%左右

Shadow Map 原理和改进【转】

http://blog.csdn.net/ronintao/article/details/51649664 参考 1.Common Techniques to Improve Shadow Depth Maps 2.Tutorial 16 : Shadow mapping 3.Shadow Mapping 4.Shadow Mapping Algorithms 5.Shadow Map阴影贴图技术之探 6.Cascaded Shadow Maps 写在前面之前已经很久没有再更新博客,上一篇已

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

地形部分的原理介绍的差不多了,但之前还有一个刻意忽略的地方,就是地形的重采样.通俗的讲,如果当前Tile没有地形数据的话,则会从他父类的地形数据中取它所对应的四分之一的地形数据.打个比方,当我们快速缩放影像的时候,下一级的影像还没来得及更新,所以会暂时把当前Level的影像数据放大显示, 一旦对应的影像数据下载到当前客户端后再更新成精细的数据.Cesium中对地形也采用了这样的思路.下面我们具体介绍其中的详细内容. 上图是一个大概流程,在创建Tile的时候(prepa

Projective Texture的原理与实现【转】

Projective Texture是比较常见的一种技术,实现起来代码也就区区的不过百行,了解其原理及技术细节是我们的重点,知其然,知其所以然. 粗略的说就是想象场景中有台投影仪(Projector),texture就是我们投影的内容,把纹理放在近裁剪面(near clip plane)上,沿着投影仪的方向把纹理投影到场景中.Xheartblue兄翻译了一篇文章,很好的给投影纹理的原理进行的阐述[1],有兴趣阅读原文的可以访问这里[2],这本书可以是好东东啊!! 在这里有几个概念不能混淆了:

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

原文地址:css3圆形百分比进度条的实现原理今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必用2个圆心相同,半径不同的div即可实现.大圆的颜色即为圆形进度条的底色,小圆的颜色即为中间百分比的遮罩颜色白色,还要加上左右2边一边一个半圆,也就是说总共应该有4个div,一个大圆的div中包含3个div,左右一边半个圆,遮罩div处于最上面. 那这里的一边半个圆怎么实现呢?使用css的clip属