<style type="text/css" media="screen"> 
#gradient { 
width: 200px; 
height: 200px; 
/* 如果浏览器不支持渐变,使用图像作为背景 */ 
background: url(gradient.jpg);

/* Webkit: Safari 4-5, Chrome 1-9 */ 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6600), to(#339900));

/* Webkit: Safari 5.1+, Chrome 10+ */ 
background: -webkit-linear-gradient(top, #ff6600, #339900);

background-image: -webkit-linear-gradient(top, #ff6600, #339900); 
/* Firefox 3.6+ */ 
background: -moz-linear-gradient(top, #ff6600, #339900); 
/* Opera 11.10+ */ 
background: -o-linear-gradient(top, #ff6600, #339900); 
/* IE 10 */ 
background: -ms-linear-gradient(top, #ff6600, #339900); 
/* IE < 10 */ 
/* 注意:这一行必须写在最后 */ 
FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ff6600, endColorStr=#339900);} 
</style>

兼容当前五大浏览器的渐变颜色背景gradient的写法的更多相关文章

  1. 兼容当前多浏览器的渐变颜色背景gradient的写法

    经常有一些时候需要使用渐变背景,使用长条图片有点太不高大上了,于是自己写了个小例子,兼容多浏览器就要为每一个浏览器写对应的CSS,太低版本的浏览器只能使用图片做背景. 下面是当前五大浏览器对gradi ...

  2. 兼容主流浏览器的渐变颜色背景gradient的写法

    /* Webkit: Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff66 ...

  3. 【转】CSS实现兼容性的渐变背景(gradient)效果

    一.有点俗态的开场白 要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现 ...

  4. 第161天:CSS3实现兼容性的渐变背景(gradient)效果

    CSS实现兼容性的渐变背景(gradient)效果 一.有点俗态的开场白 在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏 ...

  5. 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能

    当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...

  6. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  7. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  8. C# 设置Word文档背景(纯色/渐变/图片背景)

    Word是我们日常生活.学习和工作中必不可少的文档处理工具.精致美观的文档能给人带来阅读时视觉上的美感.在本篇文章中,将介绍如何使用组件Free Spire.Doc for .NET(社区版)给Wor ...

  9. Flutter之Decoration(边框、圆角、阴影、形状、渐变、背景图像等)

    1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆).  ...

随机推荐

  1. ASP.NET ASHX中获得Session

    有时候需要在ASHX中获取Session,可是一般是获取不到的,如何解决? 1-在 aspx和aspx.cs中,都是以Session["xxx"]="aaa"和 ...

  2. linux 信号处理 四 (sigaction参数说明)

    sigaction函数的功能是检查或修改与指定信号相关联的处理动作(可同时两种操作). 他是POSIX的信号接口,而signal()是标准C的信号接口(如果程序必须在非POSIX系统上运行,那么就应该 ...

  3. php语言介绍分析

    1,胡说八道 php设计专门用于web开发的编程语言,易学易用得到广泛应用的同时也饱受诟病,简单易学使得初学者用最短的时间很容易实现自己的WEB站点,且开源项目丰富,是中小型公司热衷的选择.但是,随着 ...

  4. ubuntu卸载vsftpd出错

    卸载vsftpd出错 $ sudo apt remove vsftpd Reading package lists... Done Building dependency tree Reading s ...

  5. windows下面安装easy_install和pip教程

    方便安装whl:安装完成后,可以使用pip install   xxx.whl 安装一个python轮子 python扩展库的路径:Python\Python36\Lib\site-packages\ ...

  6. 使用minGW/cygwin在Windows是用于gcc开发

    刚才记录了下用eclipse在linux下开发,突然想起来也另一种方法:MinGW. MinGW是Windows的gcc开发工具,直接使用Windows的运行库,所以可以在windows下面方便的用g ...

  7. no_unnest,push_subq,push_pred的用法 (转)

    常常有人把这三个hint搞混,主要是因为对三种重写原理不清楚.特总结如下.(实验环境为10204)1. no_unnest, unnestunnest我们称为对子查询展开,顾名思义,就是别让子查询孤单 ...

  8. 面向服务的SOA架构与服务总线ESB

    之前的软件的开发主要是面向对象的编程架构 方法---对象---模块---组件---服务,感觉现在的开发的主流的软件架构的设计思想都是对其进行重用,只不过范围越来越大,有一个系统之间进行通信到多个系统之 ...

  9. Python中的logger和handler到底是个什么鬼

    最近的任务经常涉及到日志的记录,特意去又学了一遍logging的记录方法.跟java一样,python的日志记录也是比较繁琐的一件事,在写一条记录之前,要写好多东西.典型的日志记录的步骤是这样的: 创 ...

  10. Hash的一点测试

    哈希表的学习与测试 以前写的hash都是碰运气的hash,就是乘上质数取模的那种,这样不能保证不碰撞,所以今天先写上几个双hush和链表的hash,并比较一下他们的速度,测试的话用洛谷上的“字符串哈希 ...