线性渐变：ie6以下不兼容

径向渐变：只支持firefox、Chrome和Safari

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />

<title>Background Color</title>

<style type="text/css">

* {

marigin:0;

padding:0;

}

div{

margin-bottom:20px;

width:300px;

height:100px;

}

.linear{/*线性渐变样式*/

background-color: #1FA9F4; /* Old browsers */

background-image: -moz-linear-gradient(top,#1FA9F4 0%, #001C4E 100%); /* FF3.6+ */

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1FA9F4), color-stop(100%,#001C4E)); /* Chrome,Safari4+ */

background-image: -o-linear-gradient(top,#1FA9F4 0%, #001C4E 100%); /* Opera 11.10+ */

background-image: -ms-linear-gradient(top,#1FA9F4 0%, #001C4E 100%); /* IE10+ */

background-image: linear-gradient(to bottom,#1FA9F4 0%, #001C4E 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1FA9F4', endColorstr='#001C4E',GradientType=0 ); /* IE6-8 */

}

.circle{/*径向渐变样式*/

background-color: #1FA9F4; /* Other browsers*/

background-image:-moz-radial-gradient(center 80px 45deg, circle farthest-corner, #1FA9F4 0%, #001C4E 100%); /* FF3.6+ */

background-image: -webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1))); /* Chrome,Safari4+ */

}

</style>

</head>

<body>

<div class="linear">

</div>

<div class="circle">

</div>

</body>

</html>

注意：background-image 可以写 background

我自己在网页中写的径向渐变兼容代码 ：firefox、chrome、IE10、IE10+、safari（background-image老式写法）兼容

background: rgb(98, 37, 140);

background:-webkit-radial-gradient(circle at top, rgb(160, 114, 193),rgb(98, 37, 140));

background-image: -webkit-gradient(radial,50% 0%,0,50% 55%,90,from(rgb(160, 114, 193)),to(rgb(98, 37, 140)));/* Safari 4-5, Chrome 1-9 */

background:radial-gradient(circle at top, rgb(160, 114, 193),rgb(98, 37, 140));

background:-moz-radial-gradient(circle at top, rgb(160, 114, 193),rgb(98, 37, 140));

background:-ms-radial-gradient(circle at top, rgb(160, 114, 193),rgb(98, 37, 140));

线性渐变兼容代码 ：firefox、chrome、IE10、IE10+、safari兼容

background: rgb(247, 100, 14);

background:-webkit-linear-gradient(top, rgb(251, 121, 46) ,rgb(247, 100, 14));/* safari,chrome*/

background:linear-gradient(top, rgb(251, 121, 46) ,rgb(247, 100, 14));

background:-moz-linear-gradient(top, rgb(251, 121, 46) ,rgb(247, 100, 14));

background:-ms-linear-gradient(top, rgb(251, 121, 46) ,rgb(247, 100, 14));

附图

 径向

 线性

css3 线性渐变和径向渐变的更多相关文章

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

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

  2. CSS3线性渐变和径向渐变

    background:linear-gradient(to top left, blue,orange);//从右下角往左上角渐变 background:radial-gradient(to top ...

  3. CSS3：radial-gradient，径向渐变的使用方法

    语法 径向渐变不同于线性渐变,线性渐变是从“一个方向”向“另一个方向”的颜色渐变,而径向渐变是从“一个点”向四周的颜色渐变.其语法如下: background: radial-gradient(cen ...

  4. Css3渐变(Gradients)-径向渐变

    CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你 ...

  5. CSS3_线性渐变_径向渐变----背景

    渐变的本质: 绘制一张背景图片,所以使用 background 或者 background-image background 的诸多属性,渐变都是可以使用的(repeat,position) 百分比: ...

  6. 使用canvas来完成线性渐变和径向渐变的功能

    fillStyle的第二种使用情况就是渐变色的填充.渐变色就分为线性渐变色和径向渐变色.   线性渐变:大致分为两步 这里又会使用到canvas的两个新的函数.   第一步 : 使用一个新的函数cre ...

  7. css3渐变之径向渐变

    径向渐变由它的中心定义.可以指定渐变的中心.形状(原型或椭圆形).大小.默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthes ...

  8. Canvas使用渐变之-径向渐变详解

    创建径向渐变使用 createRadialGrdient(x0,y0,r0,x1,y1,r1)​ 一共​六个参数,分别代表: 起点的圆心坐标(第一个和第二个参数), 起点园的半径(第三个参数), 终点 ...

  9. CSS3渐变——径向渐变

    上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解 ...

随机推荐

  1. JSP page指令详解

    JSP指令用来设置整个JSP页面相关的属性,如网页的编码方式和脚本语言. 语法格式如下: <%@ directive attribute="value" %> 指令可以 ...

  2. iOS面试中常见的算法题目

    一.前言 这里是在iOS求职中自己遇到的算法题,希望对大家有所帮助.不定期更新.如果大家想在线运行代码调试,可以将代码拷贝到这里.然后进行调试.下面就是常见的算法题目. 二.正文 1.就n的阶乘.(这 ...

  3. iOS开发笔记5：多线程之NSThread、NSOperation及GCD

    这篇主要总结下iOS开发中多线程的使用,多线程开发一般使用NSThread.NSOperation及GCD三种方式,常用GCD及NSOperation. 1.NSThread 创建线程主要有以下三种方 ...

  4. yum命令指南-yum使用方法

    yum check-update  检查可更新的所有软件包    yum update  下载更新系统已安装的所有软件包    yum upgrade  大规模的版本升级,与yum update不同的 ...

  5. Effective Java 76 Write readObject methods defensively

    Principle readObject method is effectively another public constructor, and it demands all of the sam ...

  6. eclipse发布项目时，会自动还原server.xml和content.xml文件

    因为Tomcat的端口冲突,导致eclipse发布项目时,失败.于是到server.xml文件中修改端口,重启使用eclipse发布项目,发现依然报端口冲突的错误,其原因时,刚才对server.xml ...

  7. Solr 参考资料

    solr 的入门好资料 https://cwiki.apache.org/confluence/display/solr/Apache+Solr+Reference+Guide https://two ...

  8. Shell basic1

    A shell script is a text file that typically begins with a shebang, as follows: #!/bin/bash /bin/bas ...

  9. SDRAM总结

    使用的流程 W9825G6JH winbond sdram 4M words X 4banks X 16bits=. Accesses to the SDRAM are burst oriented. ...

  10. 怎么运用ZBrush中的Z球制作身体部分

    本文主要讲解利用ZSphere[Z球]创建人体的大体轮廓,这是ZBrush®软件制作模型的第一步,这一阶段中我们需要反复调节人体比例结构,为以后深入制作打下基础,具体制作过程如下. 查看更多内容请直接 ...