语法： 
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. 状态图 Statechart Diagram

    一.状态图(Statechart Diagram):用来描述一个特定的对象所有可能的状态,以及由于各种事件的发生而引起的状态之间的转移和变化. 一个机器的状态图: TIP:在需求分析和系统设计时都可以 ...

  2. Unit Of Work--工作单元(一)

    简介 最近忙着新项目的架构,已经有一段时间没有更新博客了,一直考虑着要写些什么,直到有一天跟朋友谈起他们公司开发数据层遇到的一些问题时,我想应该分享一些项目中使用的数据访问模式. 虽然最近一直都在使用 ...

  3. Android应用安全之Android APP通用型拒绝服务漏洞

    0xr0ot和Xbalien交流所有可能导致应用拒绝服务的异常类型时,发现了一处通用的本地拒绝服务漏洞.该通用型本地拒绝服务可以造成大面积的app拒绝服务. 针对序列化对象而出现的拒绝服务主要是由于应 ...

  4. 测试GeoGebra博客

    已知函数 \(\textit{f}(\textit{x})=2\textit{m}\ln\textit{x}-\textit{x}^2\), \(\textit{g}(\textit{x})=\tex ...

  5. 在redhat上搭建redmine

    搞个项目管理的东西 找了下还是redmine比较合适,行动action: 1.ruby 额 是的你没有看错 需要先安装一个ruby的环境.话说这个安装起来很是纠结,本来想用yum 结果咩有成功,于是乎 ...

  6. codeforce A. Design Tutorial: Learn from Math

    题意:将一个数拆成两个合数的和, 输出这两个数!(这道题做的真是TMD水啊)开始的时候不知道composite numbers是啥意思,看了3遍才看懂.... 看懂之后又想用素数筛选法来做,后来决定单 ...

  7. 【转载】关于shell中的basename

    转载自:http://blog.chinaunix.net/uid-20499529-id-1940182.html basename 是去除目录后剩下的名字example:shell>temp ...

  8. [转载]SharePoint 2013测试环境安装配置指南

    软件版本 Windows Server 2012 标准版 SQL Server 2012 标准版 SharePoint Server 2013 企业版 Office Web Apps 2013 备注: ...

  9. C中extern的用法

    /*********************************************************************** INPUT3.C -- Input data pars ...

  10. 本学期3个sprint的团队贡献分

    第一次冲刺贡献分 组员 贡献分 103马嘉诚 28 143李新佳 22 145马文其 19 120韩智豪 16 147黄鸿浩 15 第二次冲刺贡献分 组员 贡献分 103马嘉诚 23 143李新佳 2 ...