CSS在不同浏览器下实现颜色渐变效果

想做一个首页巨幕,又不想用图片,这样速度会慢掉一点点,纯色挺丑的,只好试试渐变效果咯。CSS 3有很好的颜色渐变支持,要应付一些老旧的浏览器,还是要几行代码滴。

整理如下:

    background-image: -moz-linear-gradient(top, #ff4f02, #8f2c00);
    /* Firefox */
    
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #800000));
    /* Safiri 4+, Chrome */
    
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#ff4f02‘,endColorstr=‘#8f2c00‘);
    /* IE 6 7 8 9 */
    
    background: -ms-linear-gradient(top, #ff4f02, #8f2c00);
    /* IE 10 */

效果是酱紫的:

时间: 2024-10-27 06:24:15

CSS在不同浏览器下实现颜色渐变效果的相关文章

CSS:在IE浏览器下,元素下沉一行的解决办法

HTML: <ul> <li><a href="">嘻嘻嘻嘻嘻嘻</a><span>2015-12-17</span></li> <li><a href="">嘻嘻嘻嘻嘻嘻</a><span>2015-12-17</span></li> <li><a href="">嘻

页面在360浏览器下的兼容性问题解决

引言:  在Web应用的开发过程中,发现若干页面在360的浏览器上显示不正常,而在其它的浏览器上.皆为正常状态,问题出在哪里呢? 问题的提出: Web页面在360的浏览器上,显示不对. 可是在Firefox.chrome和IE8+以上的浏览器上,都是显示正常的. 问题的分析 1.  检查了一些Javascript框架.标准的jquery类库1.x系列,确认其工作正常,问题不是在于Javascript方面. 2.  排查掉HTML标签内容的显示 问题. 3.  怀疑是CSS在不同浏览器下的兼容性问

CSS如何改变文字选中状态下的颜色

CSS如何改变文字选中状态下的颜色:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在默认状态先一般选中的文本颜色是白字蓝底的,不过可以通过CSS进行设置.当然浏览器的支持度还是不够好,IE8和IE8以下的浏览器不支持,但是其他主流浏览器都支持此属性,不过随着浏览器的升级,这个也不会是问题.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta n

CSS gradient渐变之webkit核心浏览器下的使用以及实例

一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色,中间的是蓝色,底部为黄色来作为div的背景色.渐变通过-webkit-gradient方法实现,可以用来代替图片URL.在webkit核心浏览器下(Safari4+, Chrome),有两种类型的渐变,线性的和径向的.您还可以指定多个中间过渡色,此称之为color stops. 二.基本语法 we

IE7浏览器下CSS属性选择器二三事

一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货色,研究的多半是两个浏览器共性的东西,比方说haslayout之类的. 但是,最近1~2年,至少我个人所从事的桌面PC项目都不需要管IE6浏览器(0.3%)了,但是,还是要关心IE7浏览器(3%+)的.虽然,我们有丰富的处理IE6浏览器的经验,但是,当我们不要管IE6浏览器的时候,我们前端技术的选型

CSS改变字体下划线颜色

下图是网页中一个很普通的列表. 这次去见客户的时候,客户觉得下划线的颜色可以变变,网页就变得不单调了(据后来了解,客户上学时出板报,所以对网站的布局和细节非常的重视).做网站那么久,第一次要换下划线颜色,客户就是上帝,提出这个需求,立马查阅相关资料,发现下划线颜色是随着字体的颜色改变的,不能单独改变. 额,那怎么办? 办法总比困难多,通过使用css border-bottom实现改变文字字体下划线颜色即可. CSS代码:style="border-bottom: 1px solid blue;t

IE浏览器下常见的CSS兼容问题

[1]IE6-浏览器下子元素能撑开父级设置好的宽高 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin: 0; } ul{ margin: 0; padding: 0; list-style: none; } .list{

一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案

最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用js来append操作,亲测了都不管用.除非把autocomplete=“off”关了,但这就不符合需求了 如图 网上说的改变-webkit-autofill的阴影背景是可以去除黄色背景的,但是图片依旧被覆盖了. input:-webkit-autofill{ box-shadow:0 0 0px

CSS改变默认文本选中的颜色的方法

请选择本页面文本看看:http://hovertree.com/h/bjaf/38hq6y9d.htm 一般情况下在网页里的文本我们用鼠标选中的时候都是蓝色的,这个默认颜色也是可以更改的,本文我们学习如何使用CSS3实现改变默认文本选中的颜色.以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色. 一.关于浏览器文字选中颜色:在CSS3的爸爸 妈妈还没有相亲认识的时候,要改变页面上文字选中后的背景色以及文字颜