<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. Mysql 性能优化1 硬件设备的选择

    --------------------------------------------目录------------------------------------------------- • 我们 ...

  2. Mac 配置多jdk 随意切换

    1下载安装 jdk6:https://support.apple.com/kb/DL1572?locale=zh_CN 2配置环境变量 open .bash_profile export PATH=$ ...

  3. 4.前端注册表单验证 && 表单回填

    表单验证 前端表单验证就是在 jsp 页面中添加验证逻辑,使得注册表单在传入后台之前先进行一次表单验证 在jsp文件里的 head 块里面添加 jQuery 代码 <script type=&q ...

  4. Java学习——Eclipse下载,java配置,新建,输入输出

    Eclipse下载,java配置:  基本的软件是JDK,它可以编译.运行Java程序,下载地址是:https://www.oracle.com/technetwork/java/javase/dow ...

  5. AWS CLI以及AWS S3 SYNC命令行使用

    1.到AWS的IAM创建用户,并且获取到访问密钥 ID 和私有访问密钥.下载密钥并保存. 2.到http://docs.amazonaws.cn/cli/latest/userguide/instal ...

  6. [UE4]C++ string的用法和例子

    使用场合: string是C++标准库的一个重要的部分,主要用于字符串处理.可以使用输入输出流方式直接进行操作,也可以通过文件等手段进行操作.同时C++的算法库对string也有着很好的支持,而且st ...

  7. @echo 与 echo的区别

    @echo运行时 隐藏命令(不在terminal上显示) echo运行时显示命令(在terminal上显示) 同理@cp 与 cp  复制命令   不显示/显示

  8. Java Internet

    网络通信: 网络通信三要素: IP 协议 端口 TCP: 建立连接,发送速度慢 三次握手协议 UDP: 不需要建立连接,发送速度快 安全性低 a) 使用UDP实现数据的发送 1 创建Socket端点实 ...

  9. python之路day03

    1  复习计算机基础 计算机基础我们讲到完整的计算机系统包括了:应用程序,操作系统,硬件三部分.那么硬件又分为:cpu,内,和硬盘. 对于用户来说我们操作计算机是通过应用程序来间接控制计算机.当我们打 ...

  10. Oauth2.0(六):Resource Owner Password Credentials 授权和 Client Credentials 授权

    这两种简称 Password 方式和 Client 方式吧,都只适用于应用是受信任的场景.一个典型的例子是同一个企业内部的不同产品要使用本企业的 Oauth2.0 体系.在有些情况下,产品希望能够定制 ...