在Web上用style实现完美颜色渐变
时间：2007-02-17 来源：PHP爱好者
上微软中国网站时发现页面上方的颜色渐变非常好，查看其源代码，发现在<td>内部用了类似如下的样式： style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=’#FFFFFF’, endColorStr=’#98B2E6’, gradientType=’1’)"
测试网页，代码如下： <html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="600" border="0" cellspacing="0" cellpadding="0" height="30" align="center">
<tr>
<td style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=’#FFFFFF’, endColorStr=’#98B2E6’, gradientType=’1’)"> </td>
</tr>
</table>
</body>
</html> <html> <head> <title>无标题文档</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body bgcolor="#FFFFFF" text="#000000"> <table width="600" border="0" cellspacing="0" cellpadding="0" height="30" align="center"> <tr> <td style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=’#FFFFFF’, endColorStr=’#98B2E6’, gradientType=’1’)"> </td> </tr> </table> </body> </html> [Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
php爱好者站 http://www.ｐｈｐfans.net 网页特效|网页模板
测试网页，代码如下： <html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="600" border="0" cellspacing="0" cellpadding="0" height="30" align="center">
<tr>
<td style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=’#FFFFFF’, endColorStr=’#98B2E6’, gradientType=’1’)"> </td>
</tr>
</table>
</body>
</html> <html> <head> <title>无标题文档</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body bgcolor="#FFFFFF" text="#000000"> <table width="600" border="0" cellspacing="0" cellpadding="0" height="30" align="center"> <tr> <td style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=’#FFFFFF’, endColorStr=’#98B2E6’, gradientType=’1’)"> </td> </tr> </table> </body> </html> [Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
php爱好者站 http://www.ｐｈｐfans.net 网页特效|网页模板
相关阅读 更多 +
