语法： 
clip : auto | rect ( number number number number )

参数： 
auto : 　对象无剪切 
rect ( number number number number ) : 　依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切 。

需要注意的是 a
1.clip属性一定要和position:absolute配合使用。 
2.裁切参考点始终是左上角，这点和margin,padding不同。 
例： 
<div style="position:absolute;clip:rect(10px auto 80px 5px)"></div> 
我们可以使用clip实现各种元素的裁切和拼接。 
经典的文字拼接实现，多彩文字效果：

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 <title>clip多彩文字</title>

 <style type="text/css">

 body{background: #FFFFFF; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 100%; line-height: 140%; text-align: center; padding: 0; margin: 0;}

 p{margin: 0; }

 #top{ min-height: 90%; overflow: auto; }

 #footer{ height: 10%; background: #CC0000; color: #FFFFFF;}

 a{ text-decoration: none;}

 .textBottom { color: #a90; position: absolute; left: 146px; top: 1em; font: 26px "Century Gothic",Arial, Helvetica, sans-serif; clip: rect(18px auto auto auto);}

 .textTop { color: #f90; position: absolute; left: 146px; top: 1em; font: 26px "Century Gothic",Arial, Helvetica, sans-serif; clip: rect(0 auto 18px 0);}

 .container { width: 28em; height: 5em; margin: 1em auto; position: relative; background: #F6F6F6;text-align:center}

 .textTop:hover { color: #a90;}

 .textBottom:hover { color: #f90;}

 </style>

 </head>

 <body>

 <div id="top">

 <div class="container">

 <a href="#" class="textTop">Clip奇思妙想</a>

 </div>

 <p>文字的上半部分</p>

 <div class="container">

 <a href="#" class="textBottom">Clip奇思妙想</a>

 </div>

 <p>文字的下半部分</p>

 <div class="container">

 <a href="#" class="textTop">Clip奇思妙想</a>

 <a href="#" class="textBottom">Clip奇思妙想</a>

 </div>

 <p>二组文字重合的效果</p>

 </div>

 </body>

 </html>

[ javascript css clip ] javascript css clip 的奇思妙想之文字拼接效果的更多相关文章

  1. 《浏览器工作原理与实践》<06>渲染流程（下）：HTML、CSS和JavaScript，是如何变成页面的？

    在上篇文章中,我们介绍了渲染流水线中的 DOM 生成.样式计算和布局三个阶段,那今天我们接着讲解渲染流水线后面的阶段. 这里还是先简单回顾下上节前三个阶段的主要内容:在 HTML 页面内容被提交给渲染 ...

  2. JavaScript权威设计--JavaScript脚本化文档Document与CSS(简要学习笔记十五)

    1.Document与Element和TEXT是Node的子类. Document:树形的根部节点 Element:HTML元素的节点 TEXT:文本节点   >>HtmlElement与 ...

  3. CSS 使用母版页的内容页如何调用css和javascript

    方案一: 把所有的css样式和javascript函数放到母版页的<head></head>中,我觉得这样做的弊端就是导致母版页的<head></head&g ...

  4. 常用html、CSS、javascript前端命名规范

    无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添 ...

  5. 新手理解HTML、CSS、javascript之间的关系

    http://www.cnblogs.com/dreamingbaobei/p/5062901.html 工作多年,一直忙忙碌碌的应用各种技术,现在不忙了,问问自己究竟在做什么,究竟会什么竟答不上来, ...

  6. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  7. 新手程序员随笔2——初识html、css和javascript

    翻看博客,发现好久木有发blog了.纠其原因,一则是近来工作上卡到了一个编程难题,我是一个单线程的小猿,当我手头有事情做的时候,我不想分心去做其它事情,如写blog.二则是我个人的写作能力不佳,想到写 ...

  8. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  9. Css、javascript、dom(二)

    一.css常用标签及页面布局 1.常用标签 position(定位) z-index(定位多层顺序) background(背景) margin(外边距) padding(内边距) font-size ...

随机推荐

  1. html中css三种常见的样式选择器 zz

    1:标签选择器 标签选择器,是所有带有某种标签的都生效.这里以p为例,也就是所有的带有p标记的都会这样的样式 <html><head><styletype="t ...

  2. nodejs初窥

    1. node.js不是js应用,而是js运行平台.Node.js采用C++编写,是一个js的运行环境. 2. node.js采用事件驱动.异步编程,为网络服务而设计.Node.js的网络应用模块包括 ...

  3. raphael绘制矢量图2

    最近重新再次考虑了下raphael,也没办法把公司的项目给换成raphael的渲染了.大体上的效果稍微考了下其实并不难实现,难点大多集中在对路线以及子路线和方案的转换,以及位置的确定,几乎每操作一步都 ...

  4. 【转载】C#之int与Java之Integer的区别

    本文涉及到一些JVM原理和Java的字节码指令,推荐感兴趣的读者阅读一本有关JVM的经典书籍<深入Java虚拟机(第2版)>,将它与我在<.NET 4.0面向对象编程漫谈>中介 ...

  5. 【转载】[JS]让表单提交返回后保持在原来提交的位置上

    有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好 ...

  6. node.js中文资料导航 Mark

    Node.js HomePage Infoq深入浅出Node.js系列(进阶必读) Node.js中文文档 被误解的 Node.js Node.js C++ addon编写实战系列 热门node.js ...

  7. Android学习笔记之DocumentBuilder的使用....

    PS:当你的才华还撑不起你的野心时,那你需要静下心来学习..... 学习内容: 1.从服务器上获取XML文档... 2.解析XML文档中的内容...   XML文件想必大家都非常的熟悉,可扩展的标记语 ...

  8. Android学习笔记之SoftReference软引用...

    PS:其实这一篇和上一篇很类似,都是为了解决内存不足(OOM)这种情况的发生... 学习内容: 1.对象的引用类....   最近也是通过项目中知道了一些东西,涉及到了对象的引用类,对象的引用类分为多 ...

  9. Android 学习笔记之网络通信基础+WebView....

    PS:加快学习进度...下周一完成Android网络通信...然后正式进入实战... 学习内容: 1.Android中Http基础... 2.Android中的Socket基础... 3.Androi ...

  10. fpmmm(mpm)监控mysql模块安装

    zabbix mpm监控mysql是一个蛮不错的监控模块,不过最近官网已经不叫mpm了,而是叫fpmmm,理由为: fpmmm is the successor of mpm. mpm was ren ...