(-1)写在前面

我用的是chrome49,如果你用的不是。可以尝试换下浏览器前缀。IE在这方面的实现又特例独行了。不想提及…,这篇是为后续做准备。

(0)快速使用

background-image:-webkit-linear-gradient(red,blue);

或者

background-image: -webkit-gradient(linear,center top,center bottom,from(#ace),to(#f96));

(1)环境准备

#lol

{

width:300px;

height:400px;

border:1px solid black;

background-repeat:no-repeat;

}

<body>

<div id="lol"></div>

</body>

(2)-webkit-linear-gradient

a.参数详解

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) ,这里有正则表达式的东西

[<point> || <angle>,]?是指[<point> || <angle>,]出现0个或1个,<point> || <angle>是指要么是<point> 要么是<angle>,综合在一起就是,要么出现<point>,要么出现<angle>,要么都不出现。

<stop>, <stop>是指必须要出现的。

[, <stop>]*是指出现0个或任意多个, <stop>

<point>为单个值时,有top、left、right、bottom,默认是top,当其为top时,就是从上到下的渐变,为left就是,从左到右的渐变,其余不一一列举

background-image:-webkit-linear-gradient(left,red,blue);

<point>为两个值时,第一参数有top、bottom,第二个参数是left、right,指定的是起点,如果为top left,即左上角,则它的终点是bottom  right,即右下角。其余不一一列举

background-image:-webkit-linear-gradient(top left,red,blue);

<angle>指的是角度,background-image:-webkit-linear-gradient(45deg,red,blue),如图所示:

<stop>必须有两个分别是起点和终点,

简单写法是只写颜色background-image:-webkit-linear-gradient(red,blue);等同于复杂写法background-image:-webkit-linear-gradient(red 0%,blue 100%),当然你可以指定非%的单位

第二个参数是指在什么地方插入颜色,全部不写的话可以这样算,不算起点和终点还剩x个点,x点将整个区域分x+1段,那么每段占100/(x+1), background-image:-webkit-linear-gradient(red,orange,blue),每段占50%,所以等同于background-image:-webkit-linear-gradient(red 0%,orange 50%,blue 100%)。不是全部不写和这个类似。

(3) -webkit-gradient

a.详细解释

-webkit-gradient(<type>,<startPoint>,<endPoint>,<startColor>[,<color-stop>]*,<endColor>)

<type>指的是渐变类型,有linear和radial两种

<startPoint>指定起始点,需指定两个值,分别是水平,和垂直,水平有right(0%)、center(50%)、right(100%)、数值,垂直有top、center、bottom、数值。是基于div的长度和高度的。

<endPoint>指定终点,需指定两个值,分别是水平,和垂直,水平有left(0%)、center(50%)、right(100%)、数值,垂直有top、center、bottom、数值。是基于div的长度和高度的。

<startColor>指定起始颜色,列如:from(red),

[,<color-stop>]*,是指0个或多个,<color-stop>,<color-stop>写为color-stop(0.5,red),分别是位置和颜色

<endColor>指的终点颜色,列如:to(#f96)

background:-webkit-gradient(linear,center top,center bottom,from(#ace),color-stop(0.5,red),to(#f96));

相当于  background:-webkit-linear-gradient(top,#ace,red,#f96);

css3径向渐变详解-遁地龙卷风的更多相关文章

  1. Canvas使用渐变之-径向渐变详解

    创建径向渐变使用 createRadialGrdient(x0,y0,r0,x1,y1,r1)​ 一共​六个参数,分别代表: 起点的圆心坐标(第一个和第二个参数), 起点园的半径(第三个参数), 终点 ...

  2. CSS3过渡详解-遁地龙卷风

    第二版 0.环境准备 (1)过渡需要浏览器的支持,使用这些属性要加上浏览器厂商的前缀,我用的chrome49已经不需要前缀了, -o- Opera -webkit- Safari.Chrome -mo ...

  3. canvas径向渐变详解

    创建径向渐变步骤如下: 1,创建径向渐变对象 createRadialGradient(x0,y0,r0,x1,y1,r1),其中x0,y0,r0分别为起始圆的位置坐标和半径,x1,y1,r1为终止圆 ...

  4. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  5. CSS3 transform 属性详解(skew, rotate, translate, scale)

    写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...

  6. CSS3技巧:利用css3径向渐变做一张优惠券(转)

    在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...

  7. 第94天:CSS3 盒模型详解

    CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...

  8. CSS3属性transform详解【转载】

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  9. css3渐变详解

    今天总结渐变的问题,渐变分为线性渐变.径向渐变.呼呼,废话少说, 线性渐变:background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色) ...

随机推荐

  1. UVA - 10375 Choose and divide[唯一分解定理]

    UVA - 10375 Choose and divide Choose and divide Time Limit: 1000MS   Memory Limit: 65536K Total Subm ...

  2. Struts2 contentType属性列表

    Struts2 contentType属性列表 博客分类: Struts 2   'ez' => 'application/andrew-inset', 'hqx' => 'applica ...

  3. unsafe clr sql 部署向导

    1.部署安全权限的简单的程序集,非常简单,只需要正常发布就行,基本可以成功,前提是账号有部署clr assembly的权限 第一步: 创建登陆账号,尽量不要使用sa吧,默认架构为:dbo即可 第二部: ...

  4. SQLite剖析之编程接口详解

    前言 使用过程根据函数大致分为如下几个过程: sqlite3_open() sqlite3_prepare() sqlite3_step() sqlite3_column() sqlite3_fina ...

  5. nginx 报错 HTTP ERROR 500 (PHP数组简写模式)

    同样的代码放在Apache上执行可以执行,在nginx上面就报错了. 百度出来一堆结果貌似都不对,然后只有注释代码->运行程序,一步步找到问题所在 $buffer = []; 这一步报错了 原来 ...

  6. angularJs模块ui-router之路由控制

    在你的应用中大多数状态都有与其相关联的 url,路由控制不是设计完成 state 之后的事后想法,而是开始开发时就应该考虑的问题. 这里是如何设置一个基本url. $stateProvider .st ...

  7. 构建自己的 Linux 发行版

    如何用 SUSE Studio 构建 Linux 发行版? (1) 进入到 www.susestudio.com,设立一个帐户 (2) 为你的设备(发行版)选择一个基本模板 -软件和软件包选择 (1) ...

  8. Don’t Use Accessor Methods in Initializer Methods and dealloc 【初始化和dealloc方法中不要调用属性的存取方法,而要直接调用 _实例变量】

    1.问题:    在dealloc方法中使用[self.xxx release]和[xxx release]的区别? 用Xcode的Analyze分析我的Project,会列出一堆如下的提示:Inco ...

  9. console.log((function f(n){return ((n > 1) ? n * f(n-1) : n)})(5))调用解析

    console.log((function f(n){) ? n * f(n-) : n)})()); 5被传入到函数,函数内部三元计算,5 > 1成立,运算结果是5*f(4),二次运算,5*4 ...

  10. 面向对象(Object-Oriented)

    面向对象 面向对象,即我们以对象为核心去实现我们的目的,对象顾名思义:万物皆对象,一个人,一条狗... 当我们通过对象处理一些事情时,会让我们的代码清晰明了,内部高聚合,对外低耦合,即封装的思想 相比 ...