语法： 
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. 十六、【适合中小企业的.Net轻量级开源框架】EnterpriseFrameWork框架核心类库之单点登录SSO

    回<[开源]EnterpriseFrameWork框架系列文章索引> EFW框架源代码下载:http://pan.baidu.com/s/1qWJjo3U 单点登录(Single Sign ...

  2. 看那记不住命令的猿，如何使用GitHub

    什么是GitHub呢? GitHub是什么?好吧, 请看百科:http://baike.baidu.com/view/3366456.htm 准备:msysgit.tortoisegit 首先,我们得 ...

  3. 第一次接触终极事务处理——Hekaton

    在这篇文章里,我想给出如何与终极事务处理(Extreme Transaction Processing (XTP) )的第一次接触,即大家熟知的Hakaton.如果你想对XTP有个很好的概况认识,我推 ...

  4. 就这样获取文件的MD5和大小

    纠结真蛋疼 判断一件事值不值得去做的唯一标准是这件事是不是令我纠结.如果纠结了,就不去做了!但是,人总要活着,又能怎样.谁说男人就没有那么几天...... 从极速妙传说起 在现在各大厂商都推出免费云盘 ...

  5. C#加密类

    var es= EncryptSugar.GetInstance(); string word = "abc"; var wordEncrypt = es.Encrypto(wor ...

  6. c# XML序列化与反序列化

    c# XML序列化与反序列化 原先一直用BinaryFormatter来序列化挺好,可是最近发现在WinCE下是没有办法进行BinaryFormatter操作,很不爽,只能改成了BinaryWrite ...

  7. 什么是https？

    很久之前注意到了https这个新出来的协议,当时感觉到只是一个加密的协议,然后没有什么关注,只知道他和http的区别就在于加密,最近突然很多人问起了这个https到底是什么?于是上网查了查资料,总结之 ...

  8. Asp.Net 三层架构之泛型应用

    一说到三层架构,我想大家都了解,这里就简单说下,Asp.Net三层架构一般包含:UI层.DAL层.BLL层,其中每层由Model实体类来传递,所以Model也算是三层架构之一了,例外为了数据库的迁移或 ...

  9. ubuntu修改hostname

    在Ubuntu系统中,快速查看主机名有多种方法:其一,打开一个GNOME终端窗口,在命令提示符中可以看到主机名,主机名通常位于“@”符号后:其二,在终端窗口中输入命令:hostname或uname – ...

  10. GridView 使用方法总结 （一）

    GridView 使用方法总结 (一) 下载全部代码 http://www.sufeinet.com/thread-431-1-1.html   原文件作者是:csdn.net的清清月儿 她的主页  ...