<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. WinForm 打开文件夹

    string path="c:\windows"; Process.Start("explorer.exe", path);

  2. 一小时入门webpack

    webpack现在已经成为了大众化的项目必要脚手架,基本上现在的很多项目都需要webpack,由于webpack的出现glup和grunt已经完败,今天我们来说一下webpack如何使用. 首先我们需 ...

  3. BASIC-25_蓝桥杯_回形取数

    示例代码: #include <stdio.h>#define N 200 int main(void){ int num[N][N]; int i= 0, j = 0 , k = 0 , ...

  4. 6-3-2绕过appium的iOS测试

    WDA自带的inspector 1.启动WDA Xcode启动:product-test,适合个人调试 命令行启动:适合持续集成 UDID=$(idevice_id -l) xcodebuild -p ...

  5. Opencv 入门学习1

    1. 读取图像并显示 import cv2 img = cv2.imread('../samples/c/lena.jpg') cv2.nameWindow("Image") #可 ...

  6. Asterisk重要App

    elastix82*CLI> core show application  SoftHangup -= Info about application 'SoftHangup' =- [Synop ...

  7. 文件读操作(IO编程)

    将文件中的数据读入程序,是将程序外部的数据传入程序中,应该使用输入流——InputStream或Reader.而由于读取的是特定的数据源——文件,则可以使用输入对应的子类FileInputStream ...

  8. 基于Linux的Samba开源共享解决方案测试(三)

    在极限写场景下,对于网关的网络监控如图: 在极限写场景下,对于网关的网络监控如图: 在极限混合读写场景下,对于网关的网络监控如图: 在极限混合读写场景下,对于客户端的网络监控如图: 双NAS网关100 ...

  9. mysql 更新(九) pymysql模块的使用

    16-pymysql模块的使用   本节重点: pymysql的下载和使用 execute()之sql注入 增.删.改:conn.commit() 查:fetchone.fetchmany.fetch ...

  10. 转载 spring事务增强

    1.预备知识 aop概念请参考[http://www.iteye.com/topic/1122401]和[http://jinnianshilongnian.iteye.com/blog/141859 ...