CSS实现渐变效果

最新推荐文章于 2024-07-11 11:24:40 发布

royzhou20081011

最新推荐文章于 2024-07-11 11:24:40 发布

阅读量112

点赞数

分类专栏： CSS 文章标签： CSS Microsoft HTML

本文链接：https://blog.csdn.net/royzhou20081011/article/details/83440031

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<TITLE> New Document </TITLE>
		<META NAME="Generator" CONTENT="EditPlus">
		<META NAME="Author" CONTENT="">
		<META NAME="Keywords" CONTENT="">
		<META NAME="Description" CONTENT="">
		<style>
		.upToDown{
			FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FFCC00,endColorStr=#000000);
		}
		.leftToRight{
			FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#FFCC00,endColorStr=#000000);
		}
		.leftupToRightdown{
			FILTER:progid:DXImageTransform.Microsoft.Alpha(
			style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100); 
			BACKGROUND-COLOR:#FFCC00
		}
		</style>
	</HEAD>

	<BODY>
		<pre>
		一、从上至下渐变 <input type="button" onclick="document.body.className='upToDown'" value="从上至下渐变" />
		body{
		FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FFCC00,endColorStr=#000000);
		} 

		二、从左往右渐变 <input type="button" onclick="document.body.className='leftToRight'" value="从上至下渐变" />
		body{
		FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#FFCC00,endColorStr=#000000);
		} 

		三、从左上右下渐变 <input type="button" onclick="document.body.className='leftupToRightdown'" value="从上至下渐变" />
		body{
		FILTER:progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100); 
		BACKGROUND-COLOR:#FFCC00"
		}
		</pre>
	</BODY>
</HTML>

royzhou20081011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实现渐变效果

[code="html"] New Document .upToDown{ FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FFCC00,endColorStr=#000000); } .leftT...
复制链接

扫一扫