CSS顏色漸變

最新推荐文章于 2025-01-13 19:47:21 发布

愤豆

最新推荐文章于 2025-01-13 19:47:21 发布

阅读量2.2k

点赞数

文章标签： css filter xhtml firefox webkit border

<!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>
<style type="text/css">

</style>
</head>
<body>

<table cellpadding="0" cellspacing="0" width="72%" height="30" border="0">
<tr>
<td width="33%" height="300" style="filter:progid:DXImageTransform.Microsoft.Gradient
(startColorStr='#FFFFFF', endColorStr='#3568CC', gradientType='0')">1</td>

<td width="33%" height="300" style="filter:progid:DXImageTransform.Microsoft.Gradient
(startColorStr='#FFFFFF', endColorStr='#3568CC', gradientType='1')">2</td>

<td width="33%" height="300" style="filter:progid:DXImageTransform.Microsoft.Gradient
(startColorStr='#FFFFFF', endColorStr='#3568CC', gradientType='2')">3</td>
</tr>
</table>
用css实现网页背景渐变的代码如下：<br>
<p>
一、从上往下渐变</p>
Example Source Code:
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
}
<p>
二、从左上至右下渐变</p>
Example Source Code:
body{
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,
startX=50,finishX= 100,startY=50,finishY=100);
background-color: skyblue;
}
<p>
三、从左往右渐变</p>
Example Source Code:
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);
}
<p>
四、从上往下渐变</p>
Example Source Code:
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"
<p>
五、从上往下渐变</p>
Example Source Code:
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"
</body>

</html>