利用CSS中的Clip属性来创造各种多彩的文字 -- [DIV+CSS]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

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

天极网 2007/12/12 21:21:41 深山行者字体:大中小浏览 5850

原理

　　将二个相同而色彩不同的文字重合在一起，通过分别给其加 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>

前一页:CSS中word-wrap属性同word-break属性的两者在中英文混排时的区别

后一页:调整CSS类型的顺序改变链接翻滚效果

相关阅读: 深山旅行社网站管理系统 v1.7; div+css设置列表li超出部分显示省略号; 仿淘宝首页商品分类列表效果; 北京顺义阿来电脑科技有限公司电脑配件在线网店; 旅游网站的企业站自定义功能完成。; CSS编写过程中常见的10个错误以及解决方法; ASP把数字用逗号每3位隔开显示代码; 淡蓝色的V2.1加强版

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; uni-app; asp函数库; ASP; DIV+CSS; HTML; python

更多>>同类信息: jquery设置或获取修改classname; 利用css3.0写出一个音乐播放的唱片碟盘的效果; 利用css中的scale()实现放大缩小效果; 利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明; css背景使用base64编码或者将base64编码放在img图片标签中; 利用css3中的-webkit-font-smoothing把网页文字的毛边去掉

更多>>最新添加文章: 2026 aliyun阿里域名云注册续费优惠口令; dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT; Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素; 抖音直播音挂载小雪花懂车帝小程序; javascript获取浏览器指纹可以用来做投票; 火狐Mozilla Firefox出现：无法载入您的Firefox配置文件它可能已经丢失或是无法访问问题解决集合处理办法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径; python通过代码修改pip下载源让下载库飞起

更多>>随机抽取信息: 在DIV+CSS里面IE5.5的专用标签; uni-app跨端开发微信小程序时页面栈超过10层时小程序像卡死一样假性不能点击无法跳转的解决方案; 12个定律原则; 诸城现代旅行社有限公司; 让层处于上一个DIV层的右下角; 支持win7的node.js版本

更多标签热门标签

关键字重复 img 翻转 csss rnd 风格珍惜上传灰色 javascri 留言次数字体 CAD 数据变幻小偷还原获取顶部管理缩略图 box 图层 dd 高亮 weatherxml 自适应高度文章间隔结果返回 Javascript实现CSS代码高亮显示1 meta 强度显示器 asasds split hack 名称人生按钮产品链接替换信息省市调色器框 innerHTML