纯css实现的文本渐变_建站学-个人建站指南,网页制作,网站设计,网站制作教程

纯css实现的文本渐变

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <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; font-weight:bold; text-transform:uppercase; letter-spacing:-.05em; position:relative; } h2 { font-size:260%; 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"); } http://bizhi.knowsky.com/ * 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></h5> <h5>更多精彩请关注 www.jzxue.com<span></span></h5> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

(责任编辑：admin)

搜索

热门标签:

纯css实现的文本渐变