语法： 
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. Oracle Purchasing QUESTIONS AND ANSWERS

    Topic Summary Topic: CORRECTIONS: Corrections Topic: DELIVER: Receiving Delivery Topic: DROPSHIP: Dr ...

  2. Visual Studio 2015开发Android App启动调试始终无法完成应用部署的解决方案

    创建一个Android App项目后,直接启动调试发现Visual Studio Emulator for Android已成功运行,但应用始终处于Build中(等待时间超过1小时),并未如预期通过a ...

  3. log4net各种Filter使用

    log4net里面的filter类常用的为: 1.DenyAllFilter 拒绝所用的日志输出 <filter type="log4net.Filter.LevelMatchFilt ...

  4. Mac OS使用ll、la、l等ls的别名命令

    在linux下习惯使用ll.la.l等ls别名的童鞋到mac os可就郁闷了-- 其实只要在用户目录下建立一个脚本“.bash_profile”,并输入以下内容即可: alias ll='ls -al ...

  5. 听声辨位识DUMP

    要处理的dump成千上万,每个都用眼睛去看也太累了,不如用耳朵听好了.相信经过一段时间适应,一定可以做到凭听就解决dump分析.(逃 DumpMusican 这个小exe只需要把dump路径作为参数传 ...

  6. 【目录】C#操作Excel组件Spire.XLS系列文章目录

    本博客所有文章分类的总目录链接:http://www.cnblogs.com/asxinyu/p/4288836.html 1.C#操作Excel组件Spire.XLS文章目录 1.[原创].NET读 ...

  7. 【转】github上值得关注的前端项目

    综合/资源 frontend-dev-bookmarks 一个巨大的前端开发资源清单.star:15000 front-end-collect 分享自己长期关注的前端开发相关的优秀网站.博客.以及活跃 ...

  8. Spring Remoting: Hessian--转

    原文地址:http://www.studytrails.com/frameworks/spring/spring-remoting-hessian.jsp Concept Overview The p ...

  9. Watch out for these 10 common pitfalls of experienced Java developers & architects--转

    原文地址:http://zeroturnaround.com/rebellabs/watch-out-for-these-10-common-pitfalls-of-experienced-java- ...

  10. Java Garbage Collection Basics--转载

    原文地址:http://www.oracle.com/webfolder/technetwork/tutorials/obe/java/gc01/index.html Overview Purpose ...