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

    chrome://chrome-urls/ List of Chrome URLs chrome://accessibility chrome://appcache-internals chrome: ...

  2. 全国计算机等级考试二级教程-C语言程序设计_第10章_字符串

    字符型指针数组 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> //参数中,int a ...

  3. 通过属性集名称获取属性集id

    Mage::getModel('eav/entity_attribute_set')->load('属性集名称', 'attribute_set_name')->getAttributeS ...

  4. Redmine email配置

    很简单,先安装sendmail apt-get install sendmail 然后在redmine目录的配置文件conf/configuration.yml中取消几行注释: # ==== Send ...

  5. openstack之horizon源码分析

    一.基础准备: Horizon是基于django webframework开发的标准的Python wsgi程序,django的设计专注于代码的高度可重用,信奉DRY原则,一切面向对象,而Horizo ...

  6. CRM后期修改实体，新增货币类型字段 需要注意的问题

    货币类型字段新增 需要处理历史数据 否则编辑会报错 提示如果货币字段中存在值,则需要指定币种,请选择币种,然后重试 编辑时货币字段不显示￥符号.新增正常.第一次编辑提示错误保存后再编辑也正常.不是JS ...

  7. WinRAR 自动解压 解压完成后，执行批处理文件

    部分内容参考网页:http://bbs.kafan.cn/thread-1243208-1-1.html WinRAR 的自动解压文件功能使压缩包也能像 Setup 程序那样,双击后显示一个软件许可, ...

  8. Csharp多态的实现(抽象类)

    1.什么是抽象类 抽象类是虚拟的类,不能创建对象,用abstract修饰,在子类中用override进行重写 抽象类中可以存放抽象方法,属性,也可以存放非抽象方法,属性(这个在下面的代码可以看出来的) ...

  9. op cache config

    [opcache] ; dll地址 zend_extension=php_opcache.dll ; 开关打开 opcache.enable=1 ; 开启CLI opcache.enable_cli= ...

  10. codeforces 8C. Looking for Order 状压dp

    题目链接 给n个物品的坐标, 和一个包裹的位置, 包裹不能移动. 每次最多可以拿两个物品, 然后将它们放到包里, 求将所有物品放到包里所需走的最小路程. 直接状压dp就好了. #include < ...