CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。

1、语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction(角度),默认是to bottm,即从上到下的渐变。

stop,颜色的分布位置,默认是均匀分布,比如有三个颜色渐变,每个颜色的stop值为33.3%。

举个栗子:

.smallbox{
    width:300px;
    height:100px;
    background-image:linear-gradient(to right,red,yellowgreen,blue);
}

效果:

direction的值自然还有其他三个,分别是to top 、to left 、 to bottom(默认)。

但是这仅仅是常规方向,比如你想斜着渐变,可以这样调整角度,比如从左上角向右下角渐变,可以:

.smallbox{
    width:300px;
    height:100px;
    background-image:linear-gradient(to right bottom,red,yellowgreen,blue);
}

效果:

类似值,还有,to right top、to left top、to left bottom。

可以使用具体角度值表示角度,单位deg:

举个栗子,比如90deg(也就是to right):

.smallbox{
    width:300px;
    height:100px;
    background-image:linear-gradient(90deg,red,yellowgreen);
}

效果:

重复性渐变:repeating-linear-gradient

.smallbox{
    width:300px;
    height:100px;
    background-image: repeating-linear-gradient(90deg,red 10%,yellowgreen 20%);
}

效果:

渐变到透明:rgba

.smallbox{
    width:300px;
    height:100px;
    background-image: linear-gradient(to right, rgba(255, 0 ,0, 1), rgba(255, 0 ,0 , 0));
}

效果:

linear-gradient----渐变的更多相关文章

  1. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  2. FCC---Create a Gradual CSS Linear Gradient

    Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...

  3. CSS 3 属性学习 —— 1. Gradient 渐变

    CSS3 中渐变分为: 线性渐变(linear-gradient)和径向渐变(radial-gradient)两种. 1. 线性渐变 参数:  <linear-gradient> = li ...

  4. gradient渐变IE兼容处理

    根据caniuse(http://caniuse.com/#search=gradient),rgba兼容性为IE10以及以上浏览器. 实例代码: <!doctype html> < ...

  5. CSS gradient渐变之webkit核心浏览器下的使用以及实例

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  6. CSS gradient渐变之webkit核心浏览器下的使用

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  7. gradient 渐变

    看了大漠 写的关于 Gradient 的文章,我也想写点以便加深记忆. 首先gradient 分为linear-gradient (线性渐变) 和 radial-gradient(径向渐变),渐变是作 ...

  8. CSS3 Gradient 渐变还能这么玩

    浏览器支持两种类型的渐变:线性渐变 (linear-gradient),径向渐变 (radial-gradient) 渐变在 CSS 中属于一种 Image 类型,可以结合 background-im ...

  9. java实现渐变效果工具

    [html] view plain copy package gradient; import java.awt.Color; import java.awt.Dimension; import ja ...

  10. css 条纹背景

    先介绍文章用到的二个知识点 background-size 属性 语法 background-size: length|percentage|cover|contain; css线性渐变 linear ...

随机推荐

  1. FluentData(微型ORM)

    using FluentData; using System; using System.Collections.Generic; using System.Linq; using System.Te ...

  2. jQuery插件(多级菜单)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. NOIP200806 火柴棒等式【B005】

    [B005]火柴棒等式[难度B]———————————————————————————————————————————————————————————— [题目要求] 给你n根火柴棍,你可以拼出多少个 ...

  4. Slate中绑定动态数据

    https://answers.unrealengine.com/questions/232322/slate-blurred-border-shadow.html

  5. Gollum 安装笔记

    环境Ubuntu server 14.04 sudo apt-get install ruby1.9.1 ruby1.9.1-dev make zlib1g-dev libicu-dev build- ...

  6. ACM: SCU 4440 Rectangle - 暴力

     SCU 4440 Rectangle Time Limit:0MS     Memory Limit:0KB     64bit IO Format:%lld & %llu  Practic ...

  7. Qt Visual Studio Add-in 导出的 .pri 怎么用?

    今天咱们介绍一下 Qt Add-in 导出的 pri 文件怎么用.   一般需要导出这个文件, 主要应该是跨平台编译的需求, 所以这个文件里包含的东西会比较少, 咱们看下导出的文件是什么样子的: # ...

  8. innerHTML 与 innerText 的区别

    innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签.innerText 指的是从起始位置到终止位置的内容,但它去除Html标签.同时,innerHTML 是所有浏览器都支持 ...

  9. sql server存储过程中SELECT 与 SET 对变量赋值的区别

    SQL Server 中对已经定义的变量赋值的方式用两种,分别是 SET 和 SELECT. 对于这两种方式的区别,SQL Server 联机丛书中已经有详细的说明,但很多时候我们 并没有注意,其实这 ...

  10. GO语言练习:反射

    列举几个反射的例子:1)简单类型反射,2)复杂类型反射,3)对反射回来的数据的可修改属性 1.简单类型反射 1.1)代码 package main import ( "fmt" & ...