博客介绍了渐变背景与圆角边框的代码实现，还给出了Filter实现渐变背景的代码及参数说明，包括起始色、结束色和渐变类型（垂直或水平，默认水平）。
1.渐变背景+圆角边框
 |  求职招聘 |  |
代码:
<style>
.bg {
background-image:url(http://wayne8323.googlepages.com/blue_repeat_x.gif); background-repeat:repeat-x; font-weight:bold; font-size:12px; color:#FFFFFF; padding-top:3px
}
</style>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="9"><img src="http://wayne8323.googlepages.com/left_corner.gif" width="9" height="27"></td>
<td class="bg" width="200"><img src="http://wayne8323.googlepages.com/jiantou.gif" hspace="8">求职招聘</td>
<td width="9"><img src="http://wayne8323.googlepages.com/right_corner.gif" width="9" height="27"></td>
</tr>
</table>
.bg {
background-image:url(http://wayne8323.googlepages.com/blue_repeat_x.gif); background-repeat:repeat-x; font-weight:bold; font-size:12px; color:#FFFFFF; padding-top:3px
}
</style>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="9"><img src="http://wayne8323.googlepages.com/left_corner.gif" width="9" height="27"></td>
<td class="bg" width="200"><img src="http://wayne8323.googlepages.com/jiantou.gif" hspace="8">求职招聘</td>
<td width="9"><img src="http://wayne8323.googlepages.com/right_corner.gif" width="9" height="27"></td>
</tr>
</table>
2.Filter实现的渐变背景
代码:
<style>
.shade {filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#024E95,endColorStr=#ffffff,gradientType=1) }
</style>
<div class="shade" style="width:100px; height:100px;"></div>
.shade {filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#024E95,endColorStr=#ffffff,gradientType=1) }
</style>
<div class="shade" style="width:100px; height:100px;"></div>
参数说明: startColorStr是渐变的起始色，endColorStr是渐边的结束色，gradientType的取值有两个：0和1，0代表垂直渐变，1代表水平渐变，1(水平渐变)是默认值
扫一扫
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
