最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
利用CSS创造多彩文字
时间:2022-07-02 13:04:49 编辑:袖梨 来源:一聚教程网
效果:
文字的上半部分
文字的下半部分
二组文字重合的效果
原理:
将二个相同而色彩不同的文字重合在一起,通过分别给其加 clip 属性,使上面和下面的文字被剪切位置不同,从而产生二种不同的色彩。
clip : 摘自苏沈小雨CSS手册
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 |
|
相关文章
- 哔咔哔咔漫画-官方正版入口链接 05-17
- kk直播如何退工会 操作方法介绍 05-17
- QQ经典版最新版本下载安装-QQ经典版app官方正版下载入口 05-17
- 鸣潮终焉矩阵怎么刷分 05-17
- 漫蛙(Manwa2)漫画最新阅读地址速递-漫蛙(Manwa2)网页版入口一键直达 05-17
- 生化危机3:重制版废弃工厂最终决战怎么玩 05-17