一、阴影
阴影的效果，阴影有四个状态值控制，分别是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. 论山寨手机与Android联姻 【7】 MTK手机软件系统

    MTK feature phone的基本功能是通话和短信,要了解MTK手机软件系统,首先需要简要回顾几个移动网络通讯的基本概念. Figure 38. GSM-GPRS Architecture Co ...

  2. 使用Flex图表组件

    原文 http://blog.csdn.net/mylxiaoyi/article/details/1618470 使用Flex图表组件 以图表或是图的方式显示数据的能力可以使得Flex程序用户的数据 ...

  3. [转]Net Framework引路蜂地图开发示例

    From:http://www.2cto.com/kf/201207/140421.html 引路蜂地图也提供对.Net Framework平台的支持,可以开发桌面地图应用,由于Mono C#的跨平台 ...

  4. 5.4const对象

    常成员函数 一个const对象可以调用const函数,但不能调用非const成员函数.必须将关键字const放在函数参数表之后,才能说明该函数是一个const成员函数. 声明常成员函数的格式如下: 类 ...

  5. IOS-时间与字符串互相转换

    有时会遇到这种问题,须要把时间和时间戳互相转换 比方把"这种格式 或者是把""转换成"2014-07-16 15:54:36" 首先来第一个: 当前时 ...

  6. Java 之HashMap.values()方法误用

    1.出错 今天在测试代码的时候发现程序报错,看代码才知道是使用HashMap.values()方法的时候出错.因为项目中需要获取Map的值的集合然后进行遍历,所以就很自然的调用了HashMap.val ...

  7. matlab差分算法

    今天实现了<一类求解方程全部根的改进差分进化算法>(by 宁桂英,周永权),虽然最后的实现结果并没有文中分析的那么好,但是本文依然是给了一个求解多项式全部实根的基本思路.思路是对的,利用了 ...

  8. [一道搜狗输入法的面试题]C++转换构造函数和类型转换函数

    今天面试遇到一道有关C++转换构造函数的题目,之前经常见到默认构造函数.拷贝构造函数.析构函数,但是从没听说过转换构造函数,隐式转换函数也是一样,C++的确是够博大精深的,学习之路很长啊! 其实我们已 ...

  9. PHP正则提取HTML中img的url值

    <html> <head> <title>获取HTML中的img的src值</title> </head> <body> < ...

  10. chrome误删书签恢复。

    由于手残本来想添加网页到书签文件夹的,结果点了删除. 但是整个人就炸了,里面有我好多链接. 于是立马Google了一下,发现不少朋友和我一样,都是误删了书签或者书签文件夹. 但是chrome并没有书签 ...