一、阴影
阴影的效果,阴影有四个状态值控制,分别是shadowBlur,shadowOffsetX,shadowOffsetY和shadowColor。
shadowBlur为阴影的像素模糊值,
shadowOffsetX和shadowOffsetY为阴影在x轴和y轴上的偏移值,
shadowColor为阴影颜色值,
其中默认的值是前三个值都为0,最后一个值设置为透明黑色。只需修改其中的两个值就可以显现出来阴影效果

二、线性渐变
createLinearGradient(x1,y1,x2,y2)方法x1,y1渐变起始点,x2,y2渐变结束点
addColorStop()添加渐变颜色

三、径向渐变<br />
createRadialGradient(x0,y0,r0,x1,y1,r1)方法
x0 渐变的开始圆的 x 坐标
y0 渐变的开始圆的 y 坐标
r0 开始圆的半径
x1 渐变的结束圆的 x 坐标
y1 渐变的结束圆的 y 坐标
r1 结束圆的半径

练习代码

HTML5阴影与渐变的更多相关文章

  1. iOS 2D绘图详解(Quartz 2D)之阴影和渐变(Shadow,Gradient)

    前言:这个系列写道这里已经是第五篇了,本文会介绍下阴影和渐变的基础知识,以及一些基本的Demo Code展示,应该还会有两篇,介绍下Bitmap绘制以及Pattern等知识. Shadow shado ...

  2. HTML5的渐变色 渐变的两种类型 createLinearGradient 和createRadialGradient

    今天又再看了html5的颜色渐变API,发现没有第一次看那么复杂. 不过我对这个颜色渐变存在着一个疑惑就是两种色带之间,那段是属于两种颜色混合的,有点模糊. 比如从红色变成黄色,在红与黄之间的那个地方 ...

  3. PIE使IE浏览器支持CSS3属性(圆角、阴影、渐变)

    http://www.360doc.com/content/12/1214/09/11181348_253939277.shtml PIE使IE浏览器支持CSS3属性(圆角.阴影.渐变) 2012-1 ...

  4. iOS 2D绘图 (Quartz2D)之阴影和渐变(shadow,Gradient)

    原博地址:http://blog.csdn.net/hello_hwc/article/details/49507881 Shadow Shadow(阴影) 的目的是为了使UI更有立体感,如图 sha ...

  5. CSS 3 阴影,倒影,渐变

    盒子阴影 box-shadow:盒子的阴影 第一个参数:设置的是阴影的水平偏移量 第二个参数:设置的是阴影的垂直偏移量 第三个参数:设置阴影的模糊程度 第四个参数:设置阴影外延值 第五个参数:阴影的颜 ...

  6. CSS属性: 阴影 轮廓 渐变

    注: 本文摘自 宁静致远 - CSDN / 但愿人长久 千里共婵娟 - CSDN 阴影 使用box-shadow属性可以为元素添加阴影效果, 比如 box-shadow: h-shadow v-sha ...

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

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

  8. html5 canvas 径向渐变2

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

  9. html5 canvas 径向渐变

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

随机推荐

  1. uva10934 Dropping water balloons

    //好久没做题 一直没状态 然后刷了个水题玩玩 //寒假集训和校赛都做到了类似的题目 然而当时并不会 (其实现在也不会 题意:有k个气球和一个n层高的楼,气球有硬度,在某曾会恰好摔碎,问至少多少次实验 ...

  2. Mysql 计算时间间隔函数

    #计算两个时间的间隔 #计算间隔天数 select TIMESTAMPDIFF(day,'2014-06-01',date(now())) #计算间隔月数 select TIMESTAMPDIFF(m ...

  3. andengine游戏引擎总结进阶篇2

    本篇包括瓦片地图,物理系统, 1瓦片地图 超级玛丽,冒险岛,魂斗罗等游戏主场景都有瓦片地图画成,它的作用可见一斑,它可以用tiled Qt软件画成,在辅助篇中讲讲解tiled Qt软件的使用 1)加载 ...

  4. 基于HTML5 Canvas的网页画板实现教程

    HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...

  5. 使用c#获取access中所有表的表名与内容

    以前在网上查过,似乎也可以通过读取access系统表的方法来获得,但是实在想不想来是什么,今天又在网上找了找,终于发现更加方便的方法,更重要的是,这种方法也可以通用所有OLEDB数据源. 这里用到了O ...

  6. setter设置器 gutter访问器

    set方法书写规范: 1.必须以set开头,set后跟去掉下划线的实例变量并且首字母大写.ps: setAge:2.一定有参数3.不能有返回值4.一定是对象方法(-开头)5.形参一般是去掉下划线的实例 ...

  7. jQuery load()和ready()

    ready与load谁先执行: 大家在面试的过程中,经常会被问到一个问题:ready与load那一个先执行,那一个后执行?答案是ready先执行,load后执行. DOM文档加载的步骤: 要想理解为什 ...

  8. MySQL的group_concat与Oracle的wm_concat使用区别

    Oracle的wm_concat在拼接时,如果字段内容为空结果为空,null类型相加不受影响. MySQL的group_concat拼接时,如果不设置Separator,字段内容为空时不会得到空的结果 ...

  9. Sql Server 服务器名称\实例名称 无法连接 Server Name\Instance Name

      解决步骤: 1:  Sql Server是否已经启动. 2:  检查Sql Server服务器是否开启TCP/IP协议. 侦听的默认端口为1433          3:     ping 数据库 ...

  10. [转]不用Cookie的“Cookie”技术

    有另外一种比较隐蔽的用户追踪技术,不使用cookie或者Javascript.很多网站已经在用了,但知道的人不多.本文就来介绍一下这种技术是如何追踪用户,用户又该如何避免追踪. 这种技术不依赖于: C ...