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. Visual Studio Code 使用 ESLint 增强代码风格检查

    前言 在团队协作开发中,为了统一代码风格,避免一些低级错误,应该设有团队成员统一遵守的编码规范.很多语言都提供了Lint工具来实现这样的功能,JavaScript也有类似的工具:ESLint.除了可以 ...

  2. ie7下<a></a>标签中<input />时不反应

    <a href="News?id=@dr["id"].CInt()" ><input type="button" valu ...

  3. 一次失败的APP业务渗透测试

    作者:whoamiecho 来源:ichunqiu 本文参加i春秋社区原创文章奖励计划,未经许可禁止转载! 一.  过程 1.1.事情起因:暴力破解 测试给了个普通用户账号,可以登录.APP一来就要登 ...

  4. SharePoint 2010 常用技巧及方法总结

    1.代码调试确定进程cd c:\windows\system32\inetsrvappcmd list wppause注:保存成批处理文件,查看进程.bat,用的时候双击即可 2.类似列表新建打开方式 ...

  5. Atitit.病毒木马的快速扩散机制原理nio 内存映射MappedByteBuffer

    Atitit.病毒木马的快速扩散机制原理nio 内存映射MappedByteBuffer 1. Java NIO(New Input/Output)1 1.1. 变更通知(因为每个事件都需要一个监听者 ...

  6. Android的消息循环机制 Looper Handler类分析

    Android的消息循环机制 Looper Handler类分析 Looper类说明   Looper 类用来为一个线程跑一个消息循环. 线程在默认情况下是没有消息循环与之关联的,Thread类在ru ...

  7. linux 系统权限 数字含义

    摘抄: sudo chmod XXX dir_name XXX是你要设置的权限代号,第一位代表Owner,第二位代表Group,第三位代表Others XXX中0代表什么都不可以,1代表可执行,2代表 ...

  8. 转大写字母-(ASCII表)

    #include<stdio.h> /* 转大写,ASCII表.大写与小写相差32 */ char upper(char c) { if(c>='a'&&c<= ...

  9. iOS开发之多线程技术——GCD篇

    本篇将从四个方面对iOS开发中GCD的使用进行详尽的讲解: 一.什么是GCD 二.我们为什么要用GCD技术 三.在实际开发中如何使用GCD更好的实现我们的需求 一.Synchronous & ...

  10. forward内部跳转 和redirect重定向跳转的区别

    1.从地址栏显示来说 forward是服务器请求资源,服务器直接访问目标地址的URL,把那个URL的响应内容读取过来,然后把这些内容再发给浏览器.浏览器根本不知道服务器发送的内容从哪里来的,所以它的地 ...