一、阴影
阴影的效果,阴影有四个状态值控制,分别是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. Weinre - 远程调试工具

              Weinre  代表Web Inspector Remote,是一种远程调试工具.借助于网络,可以在PC上直接调试运行在移动设备上的远程页面,中文意思是远程Web检查器,有了Wei ...

  2. Hibernate、批量操作数据

    Hibernate 批量操作数据可以使用两种方法实现 1.分批更新,每一小批同步一次数据: public void saveEmployee2(){ Session s=HibernateSessio ...

  3. magento中的各种form标签

    1. Text Field    $fieldset->addField('title', 'text', array(          'label'     => Mage::hel ...

  4. Swift应用开源项目推荐

    1. 风靡全球的2048 2014年出现了不少虐心的小游戏,除了名声大噪的Flappy Bird外,最风靡的应该就是2048了.一个看似简单的数字叠加游戏,却让玩的人根本停不下来,朋友圈还一度被晒分数 ...

  5. MediaChooser图库浏览器

    MediaChooser Android库 MediaChooser是一个库,浏览并选择视频和图像从SD卡.它可以用来显示文件中查看图像和视频(显示所有文件)或文件夹视图(显示文件分类).项目按日期, ...

  6. 海量数据解决思路之BitMap

    一.概述 本文将讲述Bit-Map算法的相关原理,Bit-Map算法的一些利用场景,例如BitMap解决海量数据寻找重复.判断个别元素是否在海量数据当中等问题.最后说说BitMap的特点已经在各个场景 ...

  7. excel中匹配数据

    =VLOOKUP(E6,BC:BD,2,0) E6就是要对应的那一列的一个单元格,BC就是对应的那一列,BD就是要取值的那一列

  8. ServiceStack 入门(一)

    本文主要介绍ServiceStack的安装,与第一个项目的创建. 详细了解ServiceStack,可参考官方网站: https://servicestack.net/ , Github上Servic ...

  9. JS精粹(二)

    这章主要讲语法,DC使用了表示形式语法的巴克斯范式图,这的确比语言来得准确简洁.我只想表达一个问题:表达式与表达式语句的关系.因为其他问题很明白. 从DC的巴科斯范式图上大致可以认为,表达式是比表达式 ...

  10. windows下,用绝对路径向html文件中插入图片

    首先注意路径中是否包含中文名比如 <img src="F:\头像\小黄人.jpg" width="500" height="200"/ ...