从上到下的线性渐变:

#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. 【C++】error C4146: 一元负运算符应用于无符号类型,结果仍为无符号类型

    刷leetcode 263.uglynumber时,代码如下: class Solution { public: bool isUgly(int num) { int temp = num; ) re ...

  2. The Best Path---hdu5883(欧拉路径)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5883 题意:n 个点 m 条无向边的图,找一个欧拉通路/回路使得这个路径所有结点的异或值最大. 先判断 ...

  3. web调试工具-firebug

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

  4. Excl 的一些用法--如何给很多列赋同一个值

    1.用鼠标选定要负责的列(多列) 2.在处填写值 3.Ctrl+Enter

  5. 面试&笔试常见题,你了解多少?

    HTML:1.  什么是语义化的HTML?有何意义?为什么要做到语义化?(高频率考题)2.  行内元素和块元素分别有哪些?(高频率)3.  严格模式与混杂模式的区分?如何触发这两种模式?(高频率)4. ...

  6. C语言:其他进制数转换为十进制(方法一)

    #include<stdio.h> #include<math.h> #include<string.h> //其他任意进制转换为十进制 int main() { ...

  7. CentOS 6.8内核版本升级(升级至3.10)(转)

    1.查看当前版本 [root@www.linuxidc.com docker]# cat /etc/issue CentOS release 6.8 (Final) Kernel \r on an \ ...

  8. sdut2169:Sequence(dp)

    题目:http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2169 #include <iost ...

  9. ionic安装时遇到的minimatch错误

    安装提示 npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a Reg ...

  10. 智能生活 科技无限 CTO VOICE 第二期 智能硬件创新创业专场演讲嘉宾招募

    生活不只有诗和远方,还有当下的痛点和需求 当可穿戴设备.虚拟现实.无人机.机器人进入人们视线甚至生活当中 下一个风口就在智能硬件领域上凸显 那么,创业者如何撕掉智能外衣,设计一款有竞争力的智能硬件? ...