语法： 
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. 游戏开发工具之纹理打包器-3.使用GDI+绘图

    上一次我们实现了把我们要的图片添加到CTreeCtrl控件里去,并显示图片的缩略图,现在开始我们要讲比较重要的部分--绘图区.为了实现能编辑图片的功能,绘图区应该具有如下功能. 1.  添加删除图片. ...

  2. NopCommerce之任务执行

    NOP任务提供两种:手动执行(立即)和定时执行两种. 首先来说下手动任务执行过程,下图是NOP定时任务管理界面: 从上面可以看出,我们可以选择具体的任务来手动执行任务(立即执行),当点击[立即执行]按 ...

  3. Keepalived 使用指南

    Keepalived 使用指南 1.    简介 负载均衡是虚拟服务的一种好的处理方案.当设计一种负载均衡的拓扑时一定要考虑到如下两点: 真实服务器的可用性使用健康检测机制. 负载均衡器的可用性使用故 ...

  4. 关于JavaScript中apply与call的用法意义及区别

    JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别. 先来看看JS手册中对call的解释: call 方法调用一个对象的一个方法,以另一个对象替换当前对象. cal ...

  5. LeetCode——Gas Station

    There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. You ...

  6. LitePal + Gson + Volley的ORM框架尝试方案

    为了紧跟技术潮流,目前的项目开始采用ORM的思想进行重新设计. 数据库采用轻量级ORM框架LitePal,Json解析采用Gson,网络框架采用Volley. 如果只是单纯的将这些第三方框架引进来,事 ...

  7. jquery选中下拉列表的某个值

    $('#villageToiletAnn').val('xxx'); id是select的ID,不是option的ID

  8. Java魔法堂：以Windows服务的形式运行Java程序

    一.前言 由于防止维护人员误操作关闭Java控制台程序,因此决定将其改造为以Windows服务的形式运行.弄了一个上午总算搞定了,下面记录下来,以供日后查阅. 二.Java Service Wrapp ...

  9. IE11之F12 Developer Tools--控制台工具(Console)

    前面我们介绍了IE11的Developer Tools中的第一个工具--DOM Explorer,这篇文章介绍第二个工具--控制台(Console),使用控制台工具查看错误和其他信息.发送调试输出.检 ...

  10. STL --- UVA 123 Searching Quickly

    UVA - 123 Searching Quickly Problem's Link:   http://acm.hust.edu.cn/vjudge/problem/viewProblem.acti ...