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. sDashboard：简单的，轻量级的 jQuery 仪表板插件

    sDashboard 是一个轻量的仪表板 jQuery 插件,转换一个对象数组到仪表板.数组中的每个对象将被呈现为一个仪表板组件,可以通过左右拖 ​动重新排列. sDashboards 内置渲染 Da ...

  2. 10个最好的 JavaScript 动画库和开发框架

    虽然 CSS3 动画功能能够让我们以简单轻松的方式实现动画效果,但是浏览器兼容性问题让人头疼.不过不用担心,我们还有另外的武器——JavaScript,它同样可以帮助你实现各种各样的动画效果,而且借助 ...

  3. GP服务将矢量数据加入到栅格数据中的方法

    1.如何将矢量数据加入栅格数据中 1.  Conversion Tools -->To Raster-->Polygon to Raster 2. Spatial Analyst Tool ...

  4. SharePoint Online 创建门户网站系列之导航

    前 言 关于SharePoint Online中的导航,基本是由Html + Css + JavaScript组成效果以及样式,然后在后台列表或者SharePoint Online元数据导航当做数据源 ...

  5. Android Design Principles

    Android Design Principles Enchant Me Delight me in surprising ways 用惊奇的方式取悦用户 漂亮的界面,仔细放置的动画,一个恰到时机的音 ...

  6. 怎么让一个项目里swift与OC可以兼容混合开发？

    在苹果推出了swift语言之后,很多人担心OC很快会被取代,但是苹果方面表示2年内不会摒弃OC.但现在也快了啊.有的开发团队已经开始基于swift开发,但是有很多旧的框架还没来得及用swift写出来, ...

  7. 解决Android studio 非法字符的问题

    前言:今天遇到一个问题,从一个项目中把一些类拷贝到Android studio 里面,运行的时候,报错. 显示刚才拷贝的类中有非法字符,我又检查了一遍,发现类中没有非法字符. 在网上查到了,相关的解决 ...

  8. C语言中的运算符

    1. 在C语言中运算符包括:算术运算符.关系运算符.赋值运算符.逻辑运算符 2.用运算符把变量.常量连接起来的式子就是表达式 3.我们阅读一个表达式,从表达式的功能和表达式的值来看 4. 算术运算符和 ...

  9. Config文件

    这个是以前的笔记. web.config文件是一个XML文件,它的根结点是<configuration>. 1<appSettings>节点主要用来放asp.net应用程序的配 ...

  10. iOS 9 升级过程汇中白苹果 iPhone或iPad 解决方案

    最近想必有很多朋友升级了iOS 9,不过有部分朋友在升级过程中遇到了白苹果问题.也就是卡在升级过程中,不限重启.这时,你只能通过dfu进行升级了. ios9怎么进入dfu模式: 1.将你的iPhone ...