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. js判断radiobuttonlist的选中值显示/隐藏其它模块

    <script> $(function () { var SelectVal = $("input[name='rblGJS']:checked").val(); if ...

  2. vue单页面程序

    gitHub地址:https://github.com/lily1010/vue_singlePage 举个栗子: <!DOCTYPE html> <html> <hea ...

  3. 从angularJS看MVVM

    javascript厚积薄发走势异常迅猛,导致现在各种MV*框架百家争雄,MVVM从MVC演变而来,为javascript注入了全新的活力.我工作的业务不会涉及到angularJS[ng]这么重量级的 ...

  4. Android之登录时密码的保护

    在很多的Android项目中都需要用户登录.注册.这样的话在开发中做好保护用户密码的工作就显得尤为重要.这里我把自己的密码保护方法记录下来. 这是我建了一个保存密码的文件,以便于检查自己保存密码或者上 ...

  5. 【代码笔记】iOS-和当前时间比较

    代码: #import "RootViewController.h" @interface RootViewController () @end @implementation R ...

  6. 【代码笔记】iOS-点击搜索按钮，或放大镜后都会弹出搜索框

    一, 效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> #import "CLHSearchBar.h ...

  7. Xcode插件

    Xcode插件-2016-03-10Xcode插件管理神器 —— Alcatraz 说明 Alcatraz是一个管理Xcode开源包的,你可以用它查找安装你想要的插件,模板以及配色方案,而你无需手动克 ...

  8. UIView属性

    UIView属性 1.alpha 设置视图的透明度.默认为1. // 完全透明 view.alpha = 0; // 不透明 view.alpha = 1; 2.clipsToBounds // 默认 ...

  9. git一些常用的操作(转载)

    译者序:这是一篇给像我这样的新手或者是熟悉图形工具的老鸟看的.仅作为快速入门的教程. git 现在的火爆程度非同一般,它被广泛地用在大型开源项目,团队开发,以及独立开发者,甚至学生之中. 初学者非常容 ...

  10. MySQL主主双机负载均衡

    MySQL双机主主架构,其上辅以负载均衡设备,可以实现mysql数据库的负载均衡高性能和高可用性,负载均衡设备可以根据算法将数据库操作的负 载平均分到两台MySQL服务器上,这样对于每台服务器来说工作 ...