《
纯css实现的文本渐变》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302345612013.htm
--> [
网站建设之]纯css实现的文本渐变
运行代码复制代码另存代码珍藏本页 [Ctrl+A 全体抉择 提醒：你可先修正局部代码，再按运行]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <,纯CSS实现带箭头的DIV方框;title>Css Trick - 建站学-www.jzxue.com</title> </meta> <style> body { margin:0; padding:2em 4em; background:#fff; font:90% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } h1 { font-size:300%; line-height:1em; color:#8bb544,纯CSS实现圆角效果; font-weight:bold; text-transform:uppercase; letter-spacing:-.05em; position:relative; } h2 { font-size:260%,纯CSS实现三列DIV等高布局; color:#0079b6; font-weight:bold; letter-spacing:-.05em; position:relative; margin:.6em 0; padding-top:1px; /* use top padding to adjust the start of the gradient */ width:100%; } h3 { font-size:240%; color:#7365a0; font-weight:bold; text-transform:uppercase; letter-spacing:-.05em; padding-top:3px; position:relative; margin:.6em 0; width:100%; } h4 { font-size:220%; color:#dc5b24; font-weight:normal; letter-spacing:-.05em; position:relative; margin:.6em 0; padding-top:1px; width:100%; } h1 span, h2 span, h3 span, h4 span{ position:absolute; display:block; top:0; left:0; height:100%; width:100%; background:url(gradient_1.png) repeat-x; } h1 span, h3 span{background:url(gradient_2.png) repeat-x;} * html h1 span, * html h3 span{ background-color:#fff; back\ground-color:transparent; background-image: url(none.gif); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient_2.png", sizingMethod="scale"); } * html h2 span, * html h4 span{ background-color:#fff; back\ground-color:transparent; background-image: url(none.gif); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient_1.png", sizingMethod="scale"); } </style> </head> <body> <h1>污浊的CSS渐变文本<span></span></h1> <h2>CSSRAIN DEMO<span></span></h2> <h4>国外收集过来的.<span></span></h4> <h5>IE6.7,FF2通过.<span></span><,纯CSS实现Tab选项卡的两种方案;/h5> <h5>更多出色 请关注 www.jzxue.com<span></span></h5> </body> </html>
Tag：文本渐变 文本渐变 ,
纯CSS实现Tab的两种方案;
纯css实现的文本渐变
(责任编辑：网站建设)
纯css实现的文本渐变相关文章