★→ASP程序学习群:62655404 微信公众号开发
订阅本栏目 RSS您所在的位置: 深山工作室 > DIV+CSS学习 > 正文

利用CSS中的Clip属性来创造各种多彩的文字

天极网 2007/12/12 21:21:41 深山行者 字体:  浏览 4357 我要评论
当前标签
css
原理

  将二个相同而色彩不同的文字重合在一起,通过分别给其加 clip 属性,使上面和下面的文字被剪切位置不同,从而产生二种不同的色彩。

以下是引用片段:
clip : auto | rect ( number number number number )
参数:
auto :  对象无剪切
rect ( number number number number ) :
依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换,即此边不剪切
说明:
检索或设置对象的可视区域。区域外的部分是透明的。
必须将position的值设为absolute,此属性方可使用。

  测试环境

  Firefox1.5、IE6.0、Opera8.5、IE5.01绿色版通过。

  CSS

以下是引用片段:
  .textBottom {
  color: #333333;
  position: absolute;
  left: 3em;
  top: 1em;
  font: 26px Century Gothic,Arial, Helvetica, sans-serif;
  clip: rect(18px auto auto auto);
  }
  .textTop {
  color: #CC0000;
  position: absolute;
  left: 3em;
  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;
  }


  xhtml

以下是引用片段:
<div class="container">
<a href="#" class="textTop">Cascading Style Sheet </a>
<a href="#" class="textBottom">Cascading Style Sheet </a>
</div>
相关阅读
( 2018/4/15 16:01:30 )利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器
( 2015/3/11 9:06:06 )asp判断是否是手机访问
( 2015/3/11 9:03:55 )asp利用正则检查手机端的浏览器标识来确定是否是手机访问 如果是手机访问就使用手机模板
( 2014/10/30 10:46:40 )留言板留言板V7.0
( 2014/9/16 20:27:43 )页面里面的js和css的放的位置顺序与加载速度分析
( 2014/9/11 20:43:31 )用javscript实现为表格的每一行自动加上序号
( 2014/9/10 9:14:15 )鼠标放在表格区域内,当前格的一整行和一整列变色
( 2014/9/6 15:48:21 )Dreamweaver在onLoad运行_onOpen.htm时,发生了以下javascript错误
共有0条关于《利用CSS中的Clip属性来创造各种多彩的文字》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器
在table中tr的display:block在firefox下显示布局错乱问题
在未知图片的宽度与高度时利用div+css将图片居中
用css做的英文首字母大写和英文全都大写通过各个浏览器
css优先级的例子
让DIV固定在浏览器窗口的底部(兼容IE6)
MarkMan 马克鳗,让设计更有爱 (超级给力的页面标注工具)
IE8 CSS HACK 兼容
更多>>最新添加文章
批量删除access字段里面fld.Properties.Delete
ASP操作access或sqlserver数据库的函数库
asp采用access数据库搜索信息时因为日文片假名问题提示“Microsoft JET Database Engine 错误80040e14”的解决方法
asp中求两个数的百分比(利用百分比函数FormatPercent就可以自带%的符号)
asp利用sql操作数据表、数据库的一些方法
rs操作数据表记录集对象的方法
asp利用dateadd获得上个月、本月、下个月的第一天和最后一天
asp随机显示字符长度与类型(可随机显示数字、小写字母、大写字母,可以做为随机密码使用)
更多>>随机抽取信息
在DIV+CSS里面IE5.5的专用标签
购物网上图片放大效果
极酷的,漂亮的页面loading等待页面特效
12个定律原则
让层处于上一个DIV层的右下角
iframe框架自适应高度代码
css里阴影效果滤镜DropShadow颜色数值的详细设置
radio单选按钮组选择详细