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. 用css 制作三角

    html代码: <div class="div"></div> css代码: .div{ border-top:40px solid #ff0077; bo ...

  2. jQuery Danmmu Player 弹幕视频

    Danmmu Player是基于jQuery的弹幕视频插件.当在看视频的时候,同时发表自己的观点,这样很好的提高用户互动效果.其实也就是在视频界面上做一个滚动展示动画效果,这样的聊天互动视频效果我们叫 ...

  3. SQLServer表内自关联级联删除

    今天处理SQLServer级联删除遇到了很蛋疼的事. SQLServer 不支持表内自关联级联删除,而MySql和Oracle却支持. 貌似原因是SQLServer 会产生循环级联,就不给这样弄.所以 ...

  4. jQuery构造函数init参数分析（二）

    接着上一篇随笔讨论. 如果selector是其他字符串情况就比较多了比较复杂了 // Handle HTML strings if ( typeof selector === "string ...

  5. Bootstrap transition.js 插件详解

    Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单 ...

  6. 利用ARCHPR明文破解获取PDF

    我们经常下载一些rar或zip压缩文件,解压时有时发现要密码,而密码多是为了推广而设置的网址等,如果不知道密码,可 以去来源网站上寻找或在压缩文件的注释中查看. 而并非所有都是如此,例如,网上有些人, ...

  7. 向ArcGIS的ToolBarControl中添加任意的windows控件的方法

    概要:在使用ArcEngine开发中,给ToolbarControl添加按钮形式的命令项相信大家都很熟悉了,因为网上的例子很多.但这种使用click调用功能的方式只能满足大部分用户在体验方面的需求,除 ...

  8. 转：jquery选择器总结

    原文地址:http://www.cnblogs.com/onlys/articles/jQuery.html jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法   $(&qu ...

  9. Objective-C 快速入门--基础(二)

    1.什么是继承?OC中的继承有哪些特点? “继承”是面向对象软件技术当中的一个概念.如果一个类A继承自另一个类B,就把这个A称为"B的子类",而把B称为"A的父类&quo ...

  10. 颜色线性渐变-CAGradientLayer

    我们先来看一下效果图吧: 其实,就是一个颜色的线性渐变,使用CAGradientLayer很容易就能实现.由于代码很简单,就不做过多讲解了,直接看代码吧. import UIKit class Vie ...