HTML5阴影与渐变

一、阴影
阴影的效果，阴影有四个状态值控制，分别是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阴影与渐变,布布扣,bubuko.com

时间： 2024-10-06 00:41:23

HTML5阴影与渐变的相关文章

PIE使IE支持CSS3圆角盒阴影与渐变渲染

PIE使IE支持CSS3圆角盒阴影与渐变渲染 http://css3pie.com/download/

HTML5创建线条渐变

1.设计源码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5创建线条渐变</title> <script type="text/javascript"> /** * 创建线条渐变 */ function drawGradualText() { //找到<canvas>元素 var canv

CSS3 Pie工具可以让IE6至IE8版本实现大多数的CSS3修饰特性，如圆角、阴影、渐变等

css3 pie使用方法: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .style{ border: 1px solid #669966; padding: 60px 0pt; text-align: center; width: 200

关于ie兼容css3圆角与阴影与渐变的渲染

我们都知道,ie不兼容一些css3新属性,这就导致有些浏览效果不太好,关于ie的兼容有很多前辈给出了解决方案.这里我主要讲我用到的一个比较好用的方案,即PIE.这里的PIE实际上指的是一个名为pie.htc的文件,通过使用css的behavior行为调用这个文件,然后使IE也能实现一些常见的css3效果,例如圆角.阴影.渐变.多图片背景的渲染等等. 下面就是一个小例子: <!DOCTYPE html> <html lang="en"> <head>

html5 Canvas颜色渐变（画图很重要）

如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle.    fillStyle = color    strokeStyle = color strokeStyle 是用于设置图形轮廓的颜色,而 fillStyle 用于设置填充颜色.color 可以是表示 CSS 颜色值的字符串,渐变对象或者图案对象.默认情况下,线条和填充颜色都是黑色(CSS 颜色值 #000000). 下面的例子都表示同一种颜色.   // 这些 fillStyle 的值均为 '

【OneAPM】极客编程挑战#023：使用HTML5画布生成渐变自由落体小球效果

本期挑战 给定如下HTML: <canvas id="gbcanvas" width="350" height="300"></canvas> 阅读如下的相关HTML5画布教程: HTML5画布实现的粒子运动效果 HTML5画布Canvas基础入门 请使用HTML5画布生成一个自由落体效果的渐变小球,效果如下(点击下图查看GIF动画) 渐变色由#dd4814开始, 由#FFFF66结束 提交方式: 录制代码编写过程或最终代

css3 圆角，阴影，渐变...

一.边框圆角border border-radius:10px 0px 0px 0px; //先从左上角开始border-radius:30px;//也可只写一个 二.阴影 1.盒子的阴影 box-shadow box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; X轴偏移量 Y轴偏移量 是必填项 阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越糊: 阴影扩展半径:此参数可选,其

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

原博地址:http://blog.csdn.net/hello_hwc/article/details/49507881 Shadow Shadow(阴影) 的目的是为了使UI更有立体感,如图 shadow 主要有三个影响因素 x off-set 决定阴影沿着X的偏移量 y off-set 决定阴影沿着y的偏移量 blur value 决定了阴影的边缘区域是不是模糊的 其中不同的blur效果的图 注意: shadow也是和绘制状态相关的,意味着如果仅仅绘制一个subPath的shadow,注意s

自定义控件（阴影，渐变）

一.阴影: Paint 类定义了一个名为 setShadowLayer 的方法: public void setShadowLayer(float radius,float dx,float dy,int shadowColor), 参数意义如下: radius:阴影半径 dx: x 方向阴影的偏移量 dy: y 方向阴影的偏移量 shadowColor: 阴影的颜色 阴影layer显示 影时,shaderlayer 有 两 种 类 型 : View.LAYER_TYPE_SOFTWARE 和V