css3的gradient分为两种：线性渐变（linear）和径向渐变（radial）。

一、线性渐变linear-gradient

1、介绍

linear-gradient([设置方向]，[设置开始颜色]，[设置多种过度颜色]，[设置结束颜色])

参数：

第一个参数：指定渐变方向，可以用“角度”的关键字或“英文”来表示：

第一个参数默认：180deg，等同于“to bottom”。

后面的颜色至少有2个，即开始颜色和结束颜色。

2、使用

a、举例：

<style type="text/css">

p{

    width: 300px;

    height: 100px;

    background-image:linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

}

</style>

<p>从左到右线性渐变背景</p>

b、一个非常酷的功能：用渐变制作导航分割线

background:linear-gradient(to bottom,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px; 意思背景使用渐变色，然后不重复，居右，斜线后面的其实是background-size的设置，width 1px，height 15px
<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>CSS制作立体导航</title>

  <link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">

  <style>

    body{

      background: #ebebeb;

    }

    .nav{

      width:560px;

      height: 50px;

      font:bold 0/50px Arial;

      text-align:center;

      margin:40px auto 0;

        background: #f65f57;

      /*制作圆*/

      border-radius:10px;

      /*制作导航立体风格*/

      box-shadow:0 5px rgb(176,72,63);

    }

    .nav a{

      display: inline-block;

      -webkit-transition: all 0.2s ease-in;

      -moz-transition: all 0.2s ease-in;

      -o-transition: all 0.2s ease-in;

      -ms-transition: all 0.2s ease-in;

      transition: all 0.2s ease-in;

    }

    .nav a:hover{

      -webkit-transform:rotate(10deg);

      -moz-transform:rotate(10deg);

      -o-transform:rotate(10deg);

      -ms-transform:rotate(10deg);

      transform:rotate(10deg);

    }

    .nav li{

      position:relative;

      display:inline-block;

      padding:0 16px;

      font-size: 13px;

      text-shadow:1px 2px 4px rgba(0,0,0,.5);

      list-style: none outside none;

      /*制作导航分隔线*/

      background:linear-gradient(to bottom,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px;

    }

    /*使用伪元素制作导航列表项分隔线*/

    /*删除第一项和最后一项导航分隔线*/

    .nav li:last-child{

      background: none;

    }

    .nav a,

    .nav a:hover{

      color:#fff;

      text-decoration: none;

    }

  </style>

</head>

<body>

  <ul class="nav">

    <li>

      <a href="">Home</a>

    </li>

    <li>

      <a href="">About Me</a>

    </li>

    <li>

      <a href="">Portfolio</a>

    </li>

    <li>

      <a href="">Blog</a>

    </li>

    <li>

      <a href="">Resources</a>

    </li>

    <li>

      <a href="">Contact Me</a>

    </li>

  </ul>

</body>

</html>

效果：

c、谷歌搜索低调的线性渐变背景

查看了一个google搜索的代码，写了个例子

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>starof test demo</title>

<style type="text/css">

input[type="submit"]{

  height: 29px;

  line-height: 27px;

}

input[type="submit"]{

  background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));

  background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);

  background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);

  background-image: linear-gradient(top,#f5f5f5,#f1f1f1);

  background-color: #f5f5f5;

  border: 1px solid #dcdcdc;

  border: 1px solid rgba(0,0,0,0.1);

  -webkit-border-radius: 2px;

  border-radius: 2px;

  color: #444;

  /*以上*/

  -webkit-user-select: none;

  cursor: default;

  font-family: arial,sans-serif;

  font-size: 11px;

  font-weight: bold;

  margin: 11px 8px;

  min-width: 54px;

  padding: 0 8px;

  text-align: center;

}

input[type="submit"]:hover{

  background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1));

  background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);

  background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);

  background-image: linear-gradient(top,#f8f8f8,#f1f1f1);

  background-color: #f8f8f8;

  border: 1px solid #c6c6c6;

  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);

  box-shadow: 0 1px 1px rgba(0,0,0,0.1);

  color: #222;

}

</style>

</head>

<body>

<input value="Google 搜索" name="btnK" type="submit"/>

<input value="&nbsp;手气不错&nbsp;" name="btnI" type="submit">

</body>

</html>

二、径向渐变radial-gradient

待续

大漠写的css3 gradient

http://www.w3cplus.com/content/css3-gradient

css3 Gradient背景的更多相关文章

  1. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  2. CSS3 Gradient

    CSS3CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研C ...

  3. CSS3 Gradient渐变效果

    最近看到一遍关于渐变的文章,感觉很好,只是收藏感觉太可惜了,就转载了,好好学习! CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...

  4. 【01】CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径 向渐变）（转）

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 ...

  5. CSS3 Gradient线性渐变

    废话小说,看代码 <!DOCTYPE html > <html > <head> <meta charset="utf-8"> &l ...

  6. CSS3之背景剪裁Background-clip

    CSS3之背景剪裁Background-clip是CSS3中新添加的内容.这个属性还是比较简单的,主要分五个属性值:border.padding.content.no-clip和text.下面将针对这 ...

  7. -_-#【CSS3】CSS3 gradient transition with background-position

    CSS3 gradient transition with background-position <!DOCTYPE html> <html> <head> &l ...

  8. 基于CSS3动态背景登录框代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  9. CSS3透明背景+渐变样式

    CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果 ...

随机推荐

  1. Nginx学习随笔

    题外话 第一份工作中项目中有DBA和运维,所以平时也只关注开发部分,对数据库和服务器关注比较少,记得那时有用户反馈网站很慢,老大让我联系运维看看是不是服务器的问题,那时也不知道Nginx是个什么东西. ...

  2. Play!中使用HTTP异步编程

    本章译者:@Sam Liu (译者未留下自己的主页,请Sam Liu见此文,加入群168013302联系‘大黄蜂@翻译play’) 这一章主要讲解如何运用异步模式实现典型的长连接(long-polli ...

  3. JSON+YAML初步学习+ciscoconfparse

    Git git clone 在github.com右上角点击加号创建新的repository 在Linux或Mac命令行下,找到你想存放这个repository的目录,然后git clone 某个re ...

  4. Clipboard.js – 现代方式实现复制文本到剪贴板

    复制文本到剪贴板应该并不难,目前已经有很成熟的 Flash 方法.但是 Flash 已经在很多场合不适用了,特别是随着 HTML5 技术的发展.今天推荐的这个 Clipboard.js 库不依赖 Fl ...

  5. .net弹出框

    弹出框可以使用div来显示在前台增加 <div id="flowDiv" runat="server"> <div class="r ...

  6. 最简单的tab切换

    JS: $(".con").eq(0).show();    $(".btn span").click(function(){        var num = ...

  7. 一维Poisson方程计算

    package com.smartmap.algorithm.equation.differential.partial.ellipsoidal; import java.io.FileOutputS ...

  8. Tomcat系统部署启动问题分析一例[sudo 启动]

    今天的系统获取新的版本后部署时突然tomcat无法启动,而比较版本的变化内容,也就是几个jsp和js文件的变化,对于web.xml等都没有调整. 这个问题很是奇怪,下面把步骤总结一下,以避免类似的问题 ...

  9. Android MediaPlayer的生命周期

    MediaPlayer的状态转换图也表征了它的生命周期,如下: 这张状态转换图清晰的描述了MediaPlayer的各个状态,也列举了主要的方法的调用时序,每种方法只能在一些特定的状态下使用,如果使用时 ...

  10. objective-c系列-NSMutableArray

    ******************************************** // 可变数组构造方法 //  下边两句的定义都是不可变的 //    NSMutableArray *mar ...