<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>渐变效果测试</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.upToDown {
/*
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#FFCC00, endColorStr=#000000);
*/
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#FFD700, endColorStr=#FFFFFF);
}
.leftToRight {
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1, startColorStr=#FFD700, endColorStr=#FFFFFF);
}
.leftupToRightdown {
FILTER: progid:DXImageTransform.Microsoft.Alpha(style=1, opacity =45, 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";
}
一、div渐变 <input type="button" onclick="document.getElementById('div_main').className='upToDown'" value="从上至下渐变" />
body{
FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FFCC00,endColorStr=#000000);
}
</pre>
<div id="div_main" style=" border:1px solid pink; width: 500; height: 600"></div>
</BODY>
</HTML>
分享到：
相关推荐
3. **linear-gradient**：线性渐变是CSS3中的一种背景效果，ie-css3.htc通过创建多个背景层并逐步改变颜色来模拟这一效果，使得在不支持CSS3的IE浏览器上也可以呈现渐变背景。 使用ie-css3.htc的方法很简单，只需要...
本文将深入探讨如何利用CSS3实现圆角、阴影和渐变效果，并确保这些效果在包括IE在内的主流浏览器中都能得到良好的兼容性。 首先，我们来讨论CSS3的圆角效果。在CSS3之前，为了实现圆角，开发者通常需要使用大量的...
标题中的“ie-css3(让ie6 ie7 ue8支持css3).rar”指的是一个针对Internet Explorer（IE）浏览器的解决方案，尤其是版本6、7和8，这些版本不原生支持CSS3的新特性。这个压缩包包含了一个名为“ie-css3(让ie678支持css...
/* 添加此行以支持IE */ } ``` 在这个例子中，`-webkit-border-radius`、`-moz-border-radius`和`border-radius`分别用于Chrome/Safari/Opera、Firefox和其他现代浏览器，而`behavior: url(/path/to/iecss3.htc)`...
3. CSS选择器：IE6仅支持基本的选择器，如ID、类和标签选择器，而不支持更复杂的选择器，如伪类（`:hover`、`:first-child`等）和属性选择器（`[attr=value]`）。IE7开始支持部分伪类，但仍然不完整。开发者可以使用...
3. **CSS3支持**：增强了对CSS3的兼容性，允许开发者创建更具视觉吸引力的网页设计，包括圆角、阴影、渐变和动画效果。 4. **安全增强**：强化了SmartScreen筛选器，帮助防止恶意软件和钓鱼攻击，同时还提供了隐私...
- **渐变背景**：IE6-9不支持CSS3渐变，ie-css3.htc可以帮助创建线性和径向渐变背景。 - **多列布局**：在不支持`column-count`和`column-gap`等多列布局属性的IE浏览器中，ie-css3.htc可以实现类似功能。 3. **...
3. **改进的CSS支持**：IE9对CSS3的支持大大增强，包括边框半径、渐变、阴影等效果，使得网页设计更加丰富多彩。 4. **网站挂件**：IE9支持网站挂件功能，允许网站提供更丰富的交互式体验，用户可以直接在浏览器上...
在网页设计中，"幻灯片图片渐变效果"是一种常见的动态展示手段，它通过平滑过渡的方式将一张图片逐渐变为另一张，创造出流畅且吸引用户的视觉体验。这种特效不仅提升了网页的美观度，还能有效地引导用户的注意力，...
本文将详细探讨如何使IE支持CSS3的部分功能，包括阴影背景效果、圆角效果和渐变背景效果，并介绍一个名为PIE的工具。 首先，让我们关注阴影效果。CSS3中的box-shadow属性允许开发者为元素添加阴影，提升其立体感。...
而对于IE9及更早版本，渐变效果则无法直接支持，需要采用其他技术手段来实现相似效果。 径向渐变（放射性渐变）相较于线性渐变而言，渐变效果是从一个中心点向四周发散。使用radial-gradient属性可以创建这种效果，...
Selectivizr通过创建多个背景图像并调整它们的位置来模拟渐变效果。 4. **盒阴影（Box Shadow）**: CSS3的box-shadow属性可以为元素添加阴影，Selectivizr通过创建额外的div元素并调整其位置和透明度，来实现类似的...
在不支持此属性的旧版IE中，"ie-css3.htc"通过JavaScript和VML（Vector Markup Language，微软的一种矢量图形语言）来模拟这个效果，使元素的边角变得圆润。 2. **CSS3阴影（box-shadow）**：`box-shadow`属性则为...
5. **图片背景遮罩法**：如果元素背景是纯色或者简单的渐变，可以创建一个带有圆角的PNG图片作为背景，然后通过调整元素大小和位置来实现圆角效果。此方法适用于不涉及复杂背景和透明度的情况。 6. **多背景图层**...
让IE6，IE7，IE8支持CSS3效果，有一个思路就是利用 VML 模拟。 VML是The Vector Markup Language(矢量可标记语言)，原本是微软自己开发的东西，很强大。 也就是说，IE下面，可以用 VML做出圆角 。半透明、阴影 、...
- 在不支持Canvas的旧版IE浏览器中，使用了`filter`属性模拟渐变效果。 - 对于其他不支持Canvas的浏览器，仅设置背景颜色。 **示例代码应用：** ```javascript // 应用渐变 setGradient("exampleDiv", "#ff0000", ...
标题中的“ie8兼容html5 css3圆角阴影渐变placeholder等属性”指的是在IE8浏览器上实现HTML5和CSS3的一些新特性，包括圆角、阴影、渐变以及placeholder属性的支持。这些特性在现代浏览器中是标准支持的，但在较旧的...
而IE10及更高版本和其他现代浏览器支持无前缀的`linear-gradient`。 **应用示例** 以下是一些线性渐变的例子： ```css background-image: linear-gradient(to right, red, yellow); background-image: linear-...
CSS3引入了`linear-gradient`函数，允许开发者直接在背景中设置渐变效果。例如，从顶部到底部的渐变可以这样编写： ```css div { background: -webkit-linear-gradient(top, #FD0, #C30); background: -moz-...
IE浏览器（特别是IE9之前的版本）不支持标准的线性渐变语法，但是提供了自己的滤镜（filter）属性来实现渐变效果。IE的滤镜属性如下： ```css filter: progid:DXImageTransform.Microsoft.Gradient( startColorStr=...