body
{
font-family: helvetica, arial, sans-serif;
font-size: 13px;
color: #666;
background-image: -ms-linear-gradient(top, #FFFFFF 30%, #cdcdcd 100%); /* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 30%, #cdcdcd 100%); /* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 30%, #cdcdcd 100%); /* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.3, #FFFFFF), color-stop(1, #cdcdcd)); /* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 30%, #cdcdcd 100%); /* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FFFFFF 30%, #cdcdcd 100%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fffffff, endColorstr=#cdcdcdcd);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffffffff, endColorstr=#cdcdcdcd)";/*IE8+*/
}
更有详细介绍 here at http://www.luidea.com/Htmlcss/20122608.html
分享到:
相关推荐
css渐变代码,代码兼容各个浏览器,适用于ie7以上及各主流浏览器
现在,我们可以总结一个兼容各主流浏览器的渐变背景的CSS写法: ```css #gradient { width: 200px; height: 200px; background: url(gradient.jpg); /* 不支持渐变时使用图片作为备用 */ /* Webkit浏览器...
本文将深入探讨5款设计精良、用户体验优秀且兼容主流浏览器的自定义登录表单样式,旨在提升网站或应用的吸引力和易用性。 一、表单设计原则 1. 清晰布局:一个优秀的登录表单应具备清晰的结构,让用户一眼就能识别...
CSS3绿色条纹loading进度条代码就是一种实现这种效果的方式,它适用于创建响应式的加载过渡页,并且能够兼容主流的浏览器。这个加载进度条设计简洁而高效,能够吸引用户注意力,减少他们对加载时间的感知。 CSS3是...
7. **背景渐变(Background Gradients)**:CSS3支持线性渐变和径向渐变,可以为图标添加动态背景色,使其在鼠标悬停时产生色彩变化。 在实现这五款CSS3图标鼠标悬停效果时,开发者通常会结合HTML结构和CSS代码。...
这些效果设计得简洁而美观,同时确保兼容主流的浏览器,如Chrome、Firefox、Safari、Edge等。 首先,计数器进度条通常是指一种带有数字显示的进度条,能够实时显示当前加载的百分比。这种效果可以通过CSS3的伪元素...
以上代码确保了在大部分主流浏览器中,元素`.linear`的背景将呈现出从`#b8c4cb`到`#f6f6f8`(或在IE中从`#b8c4cb`到`#f6f6f8`)的渐变效果,同时在Chrome和Safari中还有从白色到蓝色的渐变作为备用。 随着浏览器对...
但并没有同时兼容IE、火狐、谷歌”,意味着在CSS渐变技术的发展历程中,曾有过一些方法只能在部分浏览器中工作,而本示例提供了一个解决方案,实现了对这些主流浏览器的全面兼容。 标签“背景色渐变”、“CSS”和...
例如,`color`属性用于设置文本颜色,`font-family`定义字体类型,`padding`和`margin`调整元素内外边距,`border`定义边框样式,`background-color`设置背景色,`display`控制元素的显示方式(如块级、行内或...
### CSS 实现 Div 背景色渐变色详解 #### 一、引言 在网页设计中,渐变色背景是一种非常常见的视觉效果,它能够为网站增添活力与美感。本文将通过一个简单的示例来详细介绍如何使用 CSS 来实现 div 的背景渐变效果...
在本教程中,我们将探讨如何利用Bootstrap创建一个兼容主流浏览器,包括IE8及谷歌浏览器在内的巨幕式风格页面。 首先,我们需要了解巨幕式风格页面的基本构成。这种页面通常包含一个全屏的背景图像,以及置于其上的...
三、其他主流浏览器的默认CSS样式 1. Chrome/Safari:这两款基于Webkit内核的浏览器,默认样式与Firefox相似,更倾向于W3C标准,但对某些旧的IE特有属性支持较差。 2. Opera:Opera的默认样式与Firefox接近,对W3C...
3. 兼容性测试:确保背景在主流浏览器和操作系统中表现一致。 本资源包“网页背景素材集合”提供的各种类型颜色的背景选择,可以帮助设计师快速找到合适的背景元素,为他们的网页设计提供灵感和便利。无论是简约的...
在本文中,我们将深入探讨如何使用CSS3来创建15种不同的图片悬停效果,这些效果不仅实用,而且兼容主流的现代浏览器,如IE9、Chrome和Firefox。这些技巧可以帮助开发者提升网站的交互性和用户体验。 首先,让我们...
7. **兼容性测试**:由于CSS3特性在不同浏览器上的支持程度不同,开发时应确保模板在主流浏览器如Chrome、Firefox、Safari、Edge及旧版IE上都能正常显示,可以使用浏览器的开发者工具进行测试。 8. **SEO友好**:一...
源码需要考虑到浏览器的兼容性,确保在主流浏览器如Chrome、Firefox、Safari、Edge等上都能正常工作。可能包含polyfills或者特定的浏览器适配代码。 通过学习和理解这份源码,开发者不仅可以实现彩色渐变进度条,...
6. **浏览器兼容性**:不同的浏览器对某些CSS属性的支持程度不同,因此在编写代码时要确保其在主流浏览器上的兼容性。 7. **用户体验**:背景颜色不应过于刺眼或干扰用户对主要内容的关注。适当的背景颜色和纹理...
首先,渐变效果在不同的浏览器中有不同的语法,为了确保跨浏览器兼容性,我们需要编写多行CSS代码来覆盖大部分主流浏览器。在上述示例中,我们创建了一个类名为`linear`的`div`元素,它将展示背景色的线性渐变效果。...
多彩渐变字,兼容所有主流浏览器。页面JS当中真正有用的只有colorful()函数: 代码如下:function colorful(obj,font,r,g,b,type){ var boxObj; if(typeof(obj)==”string”||typeof(obj)==”number”){ boxObj = ...