从上到下的线性渐变:

#grad {
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 标准的语法 */
}
 

从左到右的线性渐变:

#grad {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}

css3颜色渐变的更多相关文章

  1. CSS3颜色渐变模式

       1.线性渐变:linear-gradient 语法:<linear-gradient> = linear-gradient([ [ <angle> | to <si ...

  2. CSS3 颜色渐变、阴影、渐变的阴影

    css阴影: 外阴影:box-shadow:X Y Npx #color; 内阴影:box-shadow:inset X Y Npx #color; 文字阴影:text-shadow:X Y Npx ...

  3. CSS3颜色渐变模式总结

    1.线性渐变:linear-gradient 语法:= linear-gradient([ [ | to [, ]+) = [left | right] || [top | bottom] = [ | ...

  4. css3的背景颜色渐变@线性渐变

    背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...

  5. css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  6. 一款纯css3实现的颜色渐变按钮

    之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览  ...

  7. 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

    考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...

  8. css3背景颜色渐变属性

    https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的 ...

  9. css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变

    css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...

随机推荐

  1. java的Random

    首先,Point类 public class Point { int x, y; public Point(int x, int y) { this.x = x; this.y = y; } bool ...

  2. ArcGIS API for Silverlight动态标绘的实现

    原文:ArcGIS API for Silverlight动态标绘的实现 1.下载2个dll文件,分别是: ArcGISPlotSilverlightAPI.dll 和 Matrix.dll 其下载地 ...

  3. [LeetCode]题解(python):079 Word Search

    题目来源 https://leetcode.com/problems/word-search/ Given a 2D board and a word, find if the word exists ...

  4. 【tips】判断两个整数是否是同一个数量级

    leetcode刷题的时候,需要用到,已知整数A,B,且A>B,判断AB是否是同一数量级的. 第一想到的是不停地除以10,得到每个数字的数量级再进行比较,太麻烦: 转而向转化成字符串比较,还是麻 ...

  5. PresentViewController切换界面(一些系统自带的页面切换动画)

    视图切换,没有NavigationController的情况下,一般会使用presentViewController来切换视图并携带切换时的动画, 其中切换方法如下: – presentViewCon ...

  6. web调试工具-firebug

    Firebug是网页浏览器firefox下面的一款开发类插件.它集HTML查看和编辑,js控制台,网络状况监视器于一体,是开发js,css,HTML:和Ajax的得力助手 (自己整理的,有错误的话见谅 ...

  7. php object转数组示例

    原本是这样格式的数据: object(Thrift\Server\PageCards)#32 (3) { ["cards"]=> array(10) { [0]=> o ...

  8. jq 拖拽

    1.尼玛, move事件的时候忘了加ev,找了一个多小时 <!DOCTYPE html> <html> <head lang="en"> < ...

  9. MySQL · 性能优化 · 条件下推到物化表

    MySQL · 性能优化 · 条件下推到物化表 http://mysql.taobao.org/monthly/2016/07/08/ 背景 MySQL引入了Materialization(物化)这一 ...

  10. 智能硬件+App移动新生态【11.01深圳】

    活动概况 时间:2015年11月01日13:30-16:30 地点:深圳腾讯大厦(南山区科技园科技中一路)2楼多功能厅 主办:APICloud.庆科.信鸽 费用:免费 活动背景 智能电视.智能汽车.智 ...