html5/css3 字体 对称渐变+描边+影子

html5/css3 字体 对称渐变+描边+阴影
如题，如下图：如何实现 ？？

效果图：

（图中1是对称渐变，2是线性渐变，实现其中一种就行，两种能实现那就最好，谢谢！！！）

下面我的代码已经实现了  描边+阴影：

h2 {font-size:4em; text-shadow: 3px 0px 0px #fff,-3px 0px 0px #fff,0px 3px 0px #fff,0px -3px 0px #fff,6px 6px 10px #000;  font-weight:bold;} 

颜色值：#0A4D94 （深色）， #33C7ED 
------解决思路----------------------
http://blog.****.net/hfahe/article/details/6212232

------解决思路----------------------
<fieldset STYLE='border:;padding:14px;filter:glow(color=#0080ff,strength=3);letter-spacing:2px;'><font STYLE='font:12px/14px;color:#ffffff;font-weight:bold;'>你要输入的文字</font></fieldset>
------解决思路----------------------
<marquee bgcolor="black" behavior=left Ｓｃｒｏｌｌ amount=5><font color="white">需要滚动的字体</marquee></font>
------解决思路----------------------
embed src=" http://pan.baidu.com/share/link?shareid=1012578663&uk=4115880017 " width="宽度"height="高度" autostart=false>
------解决思路----------------------
实现了渐变和描边，但是阴影研究好久没搞出来，求大神
第一种

h2 {

			font-size:10em; 

			font-weight:bold;

			background: -webkit-linear-gradient(top,#33C7ED ,#0A4D94);

			-webkit-background-clip:text;

			-webkit-text-fill-color:transparent;

			-webkit-text-stroke: 2px white;

		} 

第二种

h2 {

			font-size:10em; 

			font-weight:bold;

			background: -webkit-linear-gradient(top,#0A4D94, #33C7ED ,#0A4D94);

			-webkit-background-clip:text;

			-webkit-text-fill-color:transparent;

			-webkit-text-stroke: 2px white;

		} 

------解决思路----------------------
<canvas id="canvasId" width="400" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
ctx.font = "bold 50px/50px  黑体,arial,sans-serif";
var lg = ctx.createLinearGradient(0, 0, 0, 50);
lg.addColorStop(0,"#6633ff");
lg.addColorStop(0.5,"#66ccff");
lg.addColorStop(1,"#6633ff");
ctx.fillStyle = lg;
ctx.strokeStyle = "#0099ff";
ctx.lineWidth = 3;
ctx.shadowColor = "#666666";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.strokeText("canvas文字",10,50);
ctx.fillText("canvas文字",10,50);
</script>

------解决思路----------------------

<canvas id="canvasId" width="400" height="300"></canvas>

<script type="text/javascript">

var canvas = document.getElementById("canvasId");

var ctx = canvas.getContext("2d");

ctx.font = "bold 50px/50px 黑体,arial,sans-serif";

var lg = ctx.createLinearGradient(0, 0, 0, 60);

lg.addColorStop(0,"#6633ff");

lg.addColorStop(0.5,"#66ccff");

lg.addColorStop(1,"#6633ff");

ctx.fillStyle = lg;

ctx.strokeStyle = "#0099ff";

ctx.lineWidth = 3;

ctx.shadowColor = "#666666";

ctx.shadowBlur = 10;

ctx.shadowOffsetX = 5;

ctx.shadowOffsetY = 5;

ctx.strokeText("CANVAS文字",10,50);

ctx.fillText("CANVAS文字",10,50);

</script>