一、阴影
阴影的效果，阴影有四个状态值控制，分别是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. naive bayes

    场景:垃圾邮件预测 目标: $p(y|w) = \frac{p(w|y)p(y)}{p(w)}$ 对于一封邮件来说,它的单词相同,所以$p(w)$可以不关心,计算得到分子就能知道更属于哪一类 所以,关 ...

  2. ME525+ 刷机工具及设置中心号码

    接上篇: 刷机包下载地址http://sbf.droid-developers.org/umts_jordanplus/list.php,选择一款大陆包.... 设置中心号码: 拨打   *#*#46 ...

  3. android捕获程序异常退出

    今天看到迅雷动漫里面一个CrashHandler 的类,我猜是崩溃处理类.进去一看.果然.顺便学习一下. Android系统的"程序异常退出",给应用的用户体验造成不良影响.为了捕 ...

  4. C#根据汉字生成拼音首字母全称

    static void Main(string[] args) { string s = GetChineseSpell("周杰伦"); Console.WriteLine(s.T ...

  5. Java语言导学笔记 Chapter 9 IO

    java.io 9.1.1 字符流 Reader为读取器(reader)提供API和部分实现,读取器是读取16位字符的流: Writer为写出器(writer)提供API和部分实现,写出器是写16位字 ...

  6. poj2891--扩展欧几里德算法

    /* 该题使用的是扩展欧几里德算法,求模线性同余方程: 分析题目:以题目输出结果为例 ,要求得到一个整数X可以满足 X % a = r,a,r,为数组名: 设数组元素为两个时, 列出方程:X % a1 ...

  7. dp状态压缩-铺砖问题

    题目:有一个n行m列的地板,需要用 1*2小砖铺盖,小砖之间互相不能重叠,问有多少种不同的铺法? 示范: 解法:用F[i][j]存放第i行的第j状态(j为十进制,转为二进制即是状态)有多少种方案. 用 ...

  8. redis 错误。

    MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk. Com ...

  9. leetcode Binary Tree Level Order Traversal python

    # Definition for a binary tree node. # class TreeNode(object): # def __init__(self, x): # self.val = ...

  10. win7 64位安装 oracle 11G 和 使用 PLSQL Developer 连接服务器

    其实基本过程和网上大多数人的完全一样,只是后面的plsql上加了几张图片而已,以此给自己做个记录,万一网上的没了,这里自己还有,会了的大森(大神),就请路过吧 1.双击开始安装