<!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>
分享到：
相关推荐
NULL 博文链接：https://yxgblog.iteye.com/blog/462809
这是国外的一个网站制作的效果，我把它转成本地形式，方便大家进行CSS3渐变测试。 主要功能是实现CSS3渐变效果，调好自己想要的颜色后，可以直接复制CSS代码！心动了吧，还不赶块试试！
线性渐变( linear-gradient ) background-image: linear-gradient(to 方向, 开始颜色, 中间颜色1, 中间颜色2, ... , 结束颜色 ); 四个方向的组合-八个方向 top, right, bottom, left 角度 90deg 径向渐变( radial-...
纯css+html实现颜色渐变与条纹效果 纯css+html实现颜色渐变与条纹效果
SS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以...此外，渐变效果的元素在放大时看起来效果更好。
脚本简介：纯js+css3渐变进度条动画特效是一款css3背景属性绘制渐变的进度条加载动画特效，动态加载效果，背景色动态渐变，纯css+js实现，对于简单页面实现进度条效果可以简单利用此方法。 脚本简介：纯js+css3渐变...
CSS渐变滤镜大全.txt(可以实现很多渐变……效果)
CSS3实现颜色渐变菜单,CSS3渐变,渐变效果图,渐变菜单,渐变,CSS3导航菜单,CSS3导航,菜单导航,CSS3实现颜色渐变菜单是一款纯CSS3实现的颜色渐变菜单效果,无需任何js代码,既可以实现按钮的色彩渐变,伴随鼠标的离开菜单...
通过CSS border-radius，我向大家展示了如何实现方形元素的圆角效果，这解决了以前美工画出这种效果而开发人员无法实现的问题。CSS渐变色(Gradients)也是一个类似的技术。现在火狐，谷歌浏览器，Safari，IE8+都支持...
CSS3实现图形颜色渐变 CSS3实现图形颜色渐变效果网页特效.zip
一款纯css3渐变进度条加载动画特效，基于css3背景属性绘制的渐变风格百分比进度条动画效果。
效果描述： 在我们的网页里，经常碰到这样的...现在好了，完全可以使用css3的代码来实现渐变，左侧定义一个颜色，右侧也设置一个颜色，并分别设置不同的透明度即可 使用方法： 关键在css样式中：10-13行
纯CSS3实现的日落时渐变色背景动画效果源码.zip
将一个盒子，定位于另一个盒子的显示区域外，并将改该盒子实现透明透明效果，当鼠标划过调用css3动画效果。
本次案例为（背景颜色渐变），运用css3就能实现背景颜色渐变的效果； HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 渐变——天际线</title...
纯css实现兼容各浏览器的颜色线性渐变，对角渐变，渐变角度设置，线性渐变透明度，及渐变方向、隔行变色等，支持设置结点渐变的效果。
而CSS3中增加了渐变属性，通过渐变属性可以轻松实现渐变效果。 CSS3渐变属性 css3中定义了两种渐变类型：线性渐变和径向渐变。线性渐变是指两个或者两个以上颜色之间显示平稳的过渡的动画效果，我们一般在css3中使用...
CSS3实现圆角阴影渐变效果兼容IE，火狐等主流浏览器，用过都说很好用，你懂的。
css3渐变头部导航是一款基于jquery css3实现的固定头部的渐变菜单效果。 css3渐变头部导航演示图： 点击查看演示：