纯CSS实现的背景渐变条


看到这个效果是不是有点熟悉，以前总感觉是用一个背景图片平铺实现的，现在明白原来用纯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=gb2312" />
<title>CSS渐变条</title>
</head>

<body>
<TABLE height=60 cellSpacing=0 cellPadding=0 width="100%" border=0>
        <TBODY>
        <TR>
          <TD id=msviRegionIdGraphic bgColor=#ffffff> </TD>
          <TD id=msviRegionGradient1 
          style="FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#FFC287', gradientType='1')" 
          width="50%"></TD>
          <TD id=msviRegionGradient2 
          style="FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFC287', endColorStr='#FF9610', gradientType='1')" 
          width="50%"></TD></TR></TBODY></TABLE>
</body>
</html>

上一个：百叶窗网页过滤效果
下一个：JavaScript下拉式颜色选择器

更多图片编程知识: