VML极道教程(十二) VML编程大结局
本系列文章导航
VML极道教程(八) shape多边型.shapetype模版.shape与curve曲线
VML极道教程(十) group集合容器.vmlframe图形引用
VML极道教程(十一) 2级标记stroke边框，shadow阴影
VML编程之大结局
1:shadow阴影 - 专用属性参考表
| 属性名 | 默认值 | 值类型/范围 | 用途 |
| on | true | boolean | 设置处理是否起效 |
| type | single | single,double,emboss,perspective | 描述使用哪种阴影效果 |
| color | black | color | 描述主要阴影颜色 |
| obscured | false | boolean | 暗示看穿图像如果没有在形状上填充 |
| opacity | 1.0 | 0.0-1.0 | 描述阴影透明度 |
| offset | 2pt,2pt | Vector2D | 描述阴影的XY偏移度 |
| color2 | gray | color | 当type!=single时，描述二次投影颜色 |
| offset2 | 0pt,0pt | Vector2D | 当type!=single时，描述二次投影XY偏移度 |
| origin | 0,0 | Vector2D | 当filltype!=solid时，描述阴影与投影的交接度 |
| matrix | null | string | 当filltype!=solid时，描述变换点阵的强度 |
2:shadow阴影 - 应用精彩实例
即使是极道教程，也没有什么好说的，一切靠你自己分析研究、修改代码达到精通为止。对着例子、属性表自己动手，是最佳的学习方法。另外该标记相当重要，务要靠自己的努力学会！
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:3131;LEFT:234px;WIDTH:67px;POSITION:absolute;TOP:142px;HEIGHT:53px" fillcolor="white" strokecolor="black" strokeweight=".75pt">
<v:shadow on="t" color="black" opacity="52428f" offset="1.5pt,1.5pt"/>
</v:oval>
<v:rect style="Z-INDEX:3135;LEFT:320px;WIDTH:50px;POSITION:absolute;TOP:145px;HEIGHT:52px" fillcolor="white" strokecolor="black" strokeweight=".75pt">
<v:shadow on="t" color="black" opacity="52428f" offset="3.75pt,1.5pt"/>
</v:rect>
<v:roundrect style="Z-INDEX:3137;LEFT:402px;WIDTH:60px;POSITION:absolute;TOP:139px;HEIGHT:59px" arcsize="9830f" fillcolor="white" strokecolor="black" strokeweight=".75pt">
<v:shadow on="t" color="red" opacity="52428f" offset="-3.75pt,1.5pt"/>
</v:roundrect>
<v:line style="Z-INDEX:3139;LEFT:303px;POSITION:absolute;TOP:228px" from="0,0" to="100.5pt,-.75pt" strokecolor="black" strokeweight="5pt"> <v:shadow on="t" color="red" opacity="52428f" offset="3.75pt,2.25pt"/>
</v:line>
<v:curve style="Z-INDEX:3148;LEFT:452px;POSITION:absolute;TOP:235px" from="0,0" control1="42pt,-51.75pt" control2="-4.5pt,49.5pt" to="28.5pt,-4.5pt" filled="f" fillcolor="white" strokecolor="black" strokeweight=".75pt">
<v:shadow on="t" color="green" opacity="52428f" offset="1.5pt,.75pt"/>
</v:curve>
<v:Image style="Z-INDEX:3161;LEFT:509px;WIDTH:67px;POSITION:absolute;TOP:202px;HEIGHT:68px" src="shili/fyw1.jpg" bilevel="f">
<v:shadow on="t" color="yellow" opacity="52428f" offset="15pt,-15pt"/>
</v:Image>
<v:oval style="Z-INDEX:3131;LEFT:234px;WIDTH:67px;POSITION:absolute;TOP:142px;HEIGHT:53px" fillcolor="white" strokecolor="black" strokeweight=".75pt">
<v:shadow on="t" color="black" opacity="52428f" offset="1.5pt,1.5pt"/>
</v:oval>
<v:rect style="Z-INDEX:3135;LEFT:320px;WIDTH:50px;POSITION:absolute;TOP:145px;HEIGHT:52px" fillcolor="white" strokecolor="black" strokeweight=".75pt">
<v:shadow on="t" color="black" opacity="52428f" offset="3.75pt,1.5pt"/>
</v:rect>
<v:roundrect style="Z-INDEX:3137;LEFT:402px;WIDTH:60px;POSITION:absolute;TOP:139px;HEIGHT:59px" arcsize="9830f" fillcolor="white" strokecolor="black" strokeweight=".75pt">
<v:shadow on="t" color="red" opacity="52428f" offset="-3.75pt,1.5pt"/>
</v:roundrect>
<v:line style="Z-INDEX:3139;LEFT:303px;POSITION:absolute;TOP:228px" from="0,0" to="100.5pt,-.75pt" strokecolor="black" strokeweight="5pt"> <v:shadow on="t" color="red" opacity="52428f" offset="3.75pt,2.25pt"/>
</v:line>
<v:curve style="Z-INDEX:3148;LEFT:452px;POSITION:absolute;TOP:235px" from="0,0" control1="42pt,-51.75pt" control2="-4.5pt,49.5pt" to="28.5pt,-4.5pt" filled="f" fillcolor="white" strokecolor="black" strokeweight=".75pt">
<v:shadow on="t" color="green" opacity="52428f" offset="1.5pt,.75pt"/>
</v:curve>
<v:Image style="Z-INDEX:3161;LEFT:509px;WIDTH:67px;POSITION:absolute;TOP:202px;HEIGHT:68px" src="shili/fyw1.jpg" bilevel="f">
<v:shadow on="t" color="yellow" opacity="52428f" offset="15pt,-15pt"/>
</v:Image>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:3170;LEFT:303px;WIDTH:121px;POSITION:absolute;TOP:139px;HEIGHT:101px" fillcolor="white" strokecolor="black" strokeweight=".75pt"> <v:shadow on="t" type="double" color="blue" opacity="52428f" offset="7.25pt,7.25pt"/>
</v:oval>
<v:oval style="Z-INDEX:3170;LEFT:532px;WIDTH:121px;POSITION:absolute;TOP:226px;HEIGHT:101px" fillcolor="white" strokecolor="black" strokeweight=".75pt">
<v:shadow on="t" type="double" color="blue" opacity="52428f" color2="green" offset="2.25pt,2.25pt" offset2="4pt,4pt"/>
</v:oval>
<v:oval style="Z-INDEX:3170;LEFT:526px;WIDTH:121px;POSITION:absolute;TOP:106px;HEIGHT:101px" filled="t" fillcolor="red" strokecolor="red" strokeweight=".75pt"> <v:shadow on="t" type="double" color="blue" opacity=".5" color2="green" offset="22.25pt,32.25pt" offset2="-22pt,32pt"/>
</v:oval>
<v:oval style="Z-INDEX:3170;LEFT:303px;WIDTH:121px;POSITION:absolute;TOP:139px;HEIGHT:101px" fillcolor="white" strokecolor="black" strokeweight=".75pt"> <v:shadow on="t" type="double" color="blue" opacity="52428f" offset="7.25pt,7.25pt"/>
</v:oval>
<v:oval style="Z-INDEX:3170;LEFT:532px;WIDTH:121px;POSITION:absolute;TOP:226px;HEIGHT:101px" fillcolor="white" strokecolor="black" strokeweight=".75pt">
<v:shadow on="t" type="double" color="blue" opacity="52428f" color2="green" offset="2.25pt,2.25pt" offset2="4pt,4pt"/>
</v:oval>
<v:oval style="Z-INDEX:3170;LEFT:526px;WIDTH:121px;POSITION:absolute;TOP:106px;HEIGHT:101px" filled="t" fillcolor="red" strokecolor="red" strokeweight=".75pt"> <v:shadow on="t" type="double" color="blue" opacity=".5" color2="green" offset="22.25pt,32.25pt" offset2="-22pt,32pt"/>
</v:oval>
1:fill填充 - 专用属性参考表
| 属性名 | 默认值 | 值类型/范围 | 用途 |
| on | true | boolean | 设置处理是否起效 |
| type | solid | solid,gradient,gradientradial,tile,pattern,frame | 描述使用哪种填充模式 |
| color | white | color | 描述基本填充颜色 |
| opacity | 1.0 | 0.0-1.0 | 描述填充透明度 |
| 以下属性只有当type=gradient,gradientradial渐变填充时有效 | |||
| color2 | white | color | 描述基本二级过度颜色 |
| colors | null | number% color* | 沿着一个渐行度填充颜色，并以百分比分配空间。例如1:colors="30% red,50% blue"。例如2:colors="30% red,50% blue,90% purple" |
| angle | 0 | -360-360 | 描述渐行效果以圆周顺时旋转、倾斜 |
| focus | 0% | -100%-100% | 描述渐层的位置 |
| focussize | 0,0 | Vector2D | 描述渐层在所有者的位置分布 |
| focusposition | 0,0 | Vector2D | 描述渐层在所有者的倾斜度分布 |
| method | sigma | none,linear,sigma,any | 描述均匀分布的对比 |
| 以下属性只有当type=tile,pattern,frame背景图像填充时有效 | |||
| src | null | URL | 描述填充使用的图像地址 |
| size | auto | Vector2D | 描述图像放大倍数 |
| origin | auto | Vector2D | 描述图像的分布位置，适用于tile、pattern |
| position | auto | Vector2D | 描述图像放置的起源位置，适用于tile、pattern |
| aspect | ignore | ignore,atleast,atmost | 描述图像居中还是充满整个图型 |
| alignshape | true | boolean | 描述是否对比容器对齐图片 |
2:fill填充 - 应用精彩实例
即使是极道教程，也没有什么好说的，一切靠你自己分析研究、修改代码达到精通为止。对着例子、属性表自己动手，是最佳的学习方法。另外该标记相当重要，务要靠自己的努力学会！
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:3001;LEFT:271;WIDTH:88;POSITION:absolute;TOP:128;HEIGHT:74" filled="t" fillcolor="yellow">
<v:fill type="frame" opacity=".5"/>
</v:oval>
<v:oval style="Z-INDEX:2999;LEFT:313;WIDTH:95;POSITION:absolute;TOP:152;HEIGHT:76" fillcolor="red"/>
<v:oval style="Z-INDEX:3001;LEFT:271;WIDTH:88;POSITION:absolute;TOP:128;HEIGHT:74" filled="t" fillcolor="yellow">
<v:fill type="frame" opacity=".5"/>
</v:oval>
<v:oval style="Z-INDEX:2999;LEFT:313;WIDTH:95;POSITION:absolute;TOP:152;HEIGHT:76" fillcolor="red"/>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:3009;LEFT:193;WIDTH:92;POSITION:absolute;TOP:117;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradient" opacity=".5" color2="yellow"/>
</v:oval>
<v:oval style="Z-INDEX:3009;LEFT:395;WIDTH:92;POSITION:absolute;TOP:120;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradient" opacity=".5" color2="yellow" angle="50" method="none"/>
</v:oval>
<v:oval style="Z-INDEX:3009;LEFT:294;WIDTH:92;POSITION:absolute;TOP:118;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradient" opacity=".5" color2="yellow" method="none"/>
</v:oval>
<v:oval style="Z-INDEX:3009;LEFT:497;WIDTH:92;POSITION:absolute;TOP:122;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradient" opacity=".5" color2="yellow" angle="50" focus="20%" method="none"/>
</v:oval>
<v:oval style="Z-INDEX:3009;LEFT:602;WIDTH:92;POSITION:absolute;TOP:121;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradient" opacity=".5" color2="yellow" angle="50" focus="50%" method="none"/>
</v:oval>
<v:oval style="Z-INDEX:3009;LEFT:193;WIDTH:92;POSITION:absolute;TOP:117;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradient" opacity=".5" color2="yellow"/>
</v:oval>
<v:oval style="Z-INDEX:3009;LEFT:395;WIDTH:92;POSITION:absolute;TOP:120;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradient" opacity=".5" color2="yellow" angle="50" method="none"/>
</v:oval>
<v:oval style="Z-INDEX:3009;LEFT:294;WIDTH:92;POSITION:absolute;TOP:118;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradient" opacity=".5" color2="yellow" method="none"/>
</v:oval>
<v:oval style="Z-INDEX:3009;LEFT:497;WIDTH:92;POSITION:absolute;TOP:122;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradient" opacity=".5" color2="yellow" angle="50" focus="20%" method="none"/>
</v:oval>
<v:oval style="Z-INDEX:3009;LEFT:602;WIDTH:92;POSITION:absolute;TOP:121;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradient" opacity=".5" color2="yellow" angle="50" focus="50%" method="none"/>
</v:oval>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:3009;LEFT:193;WIDTH:92;POSITION:absolute;TOP:117;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradientRadial" opacity=".5" color2="yellow"/>
</v:oval>
<v:oval style="Z-INDEX:3009;LEFT:301;WIDTH:92;POSITION:absolute;TOP:117;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradientRadial" opacity=".5" color2="yellow" focus="20%" method="none"/>
</v:oval>
<v:oval style="Z-INDEX:3009;LEFT:404;WIDTH:92;POSITION:absolute;TOP:122;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradientRadial" opacity=".5" color2="yellow" focus="50%" method="none"/>
</v:oval>
<v:oval style="Z-INDEX:3009;LEFT:193;WIDTH:92;POSITION:absolute;TOP:117;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradientRadial" opacity=".5" color2="yellow"/>
</v:oval>
<v:oval style="Z-INDEX:3009;LEFT:301;WIDTH:92;POSITION:absolute;TOP:117;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradientRadial" opacity=".5" color2="yellow" focus="20%" method="none"/>
</v:oval>
<v:oval style="Z-INDEX:3009;LEFT:404;WIDTH:92;POSITION:absolute;TOP:122;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradientRadial" opacity=".5" color2="yellow" focus="50%" method="none"/>
</v:oval>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:rect style="Z-INDEX:3078;LEFT:215;WIDTH:81;POSITION:absolute;TOP:134;HEIGHT:75" filled="t" fillcolor="blue">
<v:fill type="gradientRadial" opacity=".5" color2="yellow"/>
</v:rect>
<v:roundrect style="Z-INDEX:3084;LEFT:276;WIDTH:83;POSITION:absolute;TOP:129;HEIGHT:85" arcsize="9830f" filled="t" fillcolor="blue">
<v:fill type="gradient" opacity=".5" color2="yellow"/>
</v:roundrect>
<v:roundrect style="Z-INDEX:3084;LEFT:233;WIDTH:83;POSITION:absolute;TOP:236;HEIGHT:85" arcsize="9830f" filled="t" fillcolor="yellow"> <v:fill type="gradient" opacity=".5" color2="blue" colors="30% red,50% green"/>
</v:roundrect>
<v:roundrect style="Z-INDEX:3084;LEFT:334;WIDTH:83;POSITION:absolute;TOP:238;HEIGHT:85" arcsize="9830f" filled="t" fillcolor="yellow"> <v:fill type="gradientRadial" opacity=".5" color2="blue" colors="30% red,50% green"/>
</v:roundrect>
<v:rect style="Z-INDEX:3078;LEFT:215;WIDTH:81;POSITION:absolute;TOP:134;HEIGHT:75" filled="t" fillcolor="blue">
<v:fill type="gradientRadial" opacity=".5" color2="yellow"/>
</v:rect>
<v:roundrect style="Z-INDEX:3084;LEFT:276;WIDTH:83;POSITION:absolute;TOP:129;HEIGHT:85" arcsize="9830f" filled="t" fillcolor="blue">
<v:fill type="gradient" opacity=".5" color2="yellow"/>
</v:roundrect>
<v:roundrect style="Z-INDEX:3084;LEFT:233;WIDTH:83;POSITION:absolute;TOP:236;HEIGHT:85" arcsize="9830f" filled="t" fillcolor="yellow"> <v:fill type="gradient" opacity=".5" color2="blue" colors="30% red,50% green"/>
</v:roundrect>
<v:roundrect style="Z-INDEX:3084;LEFT:334;WIDTH:83;POSITION:absolute;TOP:238;HEIGHT:85" arcsize="9830f" filled="t" fillcolor="yellow"> <v:fill type="gradientRadial" opacity=".5" color2="blue" colors="30% red,50% green"/>
</v:roundrect>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:3115;LEFT:312;WIDTH:110;POSITION:absolute;TOP:130;HEIGHT:102" filled="t" fillcolor="yellow">
<v:fill src="shili/fyw2.jpg" type="frame" opacity=".5"/>
</v:oval>
<v:oval style="Z-INDEX:3115;LEFT:192;WIDTH:110;POSITION:absolute;TOP:130;HEIGHT:102" filled="t" fillcolor="white"> <v:fill src="shili/fyw2.jpg" type="frame" opacity="1"/>
</v:oval>
<v:oval style="Z-INDEX:3115;LEFT:430;WIDTH:110;POSITION:absolute;TOP:134;HEIGHT:102" filled="t" fillcolor="red">
<v:fill src="shili/fyw2.jpg" type="frame" opacity=".5" aspect="atMost"/>
</v:oval>
<v:shape style="Z-INDEX:3127;LEFT:189;WIDTH:100;POSITION:absolute;TOP:316;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="yellow" path=" m0,0 l0,0,55,-48,58,87,142,21,0,0 e">
<v:fill src="shili/fyw2.jpg" type="frame" opacity=".5"/>
</v:shape>
<v:shape style="Z-INDEX:3127;LEFT:326;WIDTH:100;POSITION:absolute;TOP:307;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" path=" m0,0 l0,0,55,-48,58,87,142,21,0,0 e"> <v:fill src="shili/fyw2.jpg" type="frame" opacity=".5" size="0.5,0.4"/>
</v:shape>
<v:oval style="Z-INDEX:3115;LEFT:312;WIDTH:110;POSITION:absolute;TOP:130;HEIGHT:102" filled="t" fillcolor="yellow">
<v:fill src="shili/fyw2.jpg" type="frame" opacity=".5"/>
</v:oval>
<v:oval style="Z-INDEX:3115;LEFT:192;WIDTH:110;POSITION:absolute;TOP:130;HEIGHT:102" filled="t" fillcolor="white"> <v:fill src="shili/fyw2.jpg" type="frame" opacity="1"/>
</v:oval>
<v:oval style="Z-INDEX:3115;LEFT:430;WIDTH:110;POSITION:absolute;TOP:134;HEIGHT:102" filled="t" fillcolor="red">
<v:fill src="shili/fyw2.jpg" type="frame" opacity=".5" aspect="atMost"/>
</v:oval>
<v:shape style="Z-INDEX:3127;LEFT:189;WIDTH:100;POSITION:absolute;TOP:316;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="yellow" path=" m0,0 l0,0,55,-48,58,87,142,21,0,0 e">
<v:fill src="shili/fyw2.jpg" type="frame" opacity=".5"/>
</v:shape>
<v:shape style="Z-INDEX:3127;LEFT:326;WIDTH:100;POSITION:absolute;TOP:307;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" path=" m0,0 l0,0,55,-48,58,87,142,21,0,0 e"> <v:fill src="shili/fyw2.jpg" type="frame" opacity=".5" size="0.5,0.4"/>
</v:shape>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:3150;LEFT:108;WIDTH:158;POSITION:absolute;TOP:3;HEIGHT:140" filled="t" fillcolor="yellow">
<v:fill src="shili/haha.gif" type="tile" opacity=".5"/>
</v:oval>
<v:oval style="Z-INDEX:3150;LEFT:267;WIDTH:224;POSITION:absolute;TOP:30;HEIGHT:193" filled="t" fillcolor="yellow">
<v:fill src="shili/haha.gif" type="tile" opacity=".5"/>
</v:oval>
<v:oval style="Z-INDEX:3150;LEFT:491;WIDTH:262;POSITION:absolute;TOP:46;HEIGHT:209" filled="t" fillcolor="yellow"> <v:fill src="shili/haha.gif" type="tile" opacity="1"/>
</v:oval>
<v:oval style="Z-INDEX:3150;LEFT:101;WIDTH:255;POSITION:absolute;TOP:149;HEIGHT:207" filled="t" fillcolor="red">
<v:fill src="shili/haha.gif" type="pattern" opacity="1"/>
</v:oval>
<v:oval style="Z-INDEX:3150;LEFT:336;WIDTH:262;POSITION:absolute;TOP:233;HEIGHT:209" filled="t" fillcolor="red">
<v:fill src="shili/haha.gif" type="pattern" opacity="1" color2="blue"/>
</v:oval>
<v:oval style="Z-INDEX:3150;LEFT:598;WIDTH:262;POSITION:absolute;TOP:242;HEIGHT:209" filled="t" fillcolor="red">
<v:fill src="shili/haha.gif" type="pattern" opacity="1" color2="blue" position="50,50"/>
</v:oval>
<v:oval style="Z-INDEX:3150;LEFT:108;WIDTH:158;POSITION:absolute;TOP:3;HEIGHT:140" filled="t" fillcolor="yellow">
<v:fill src="shili/haha.gif" type="tile" opacity=".5"/>
</v:oval>
<v:oval style="Z-INDEX:3150;LEFT:267;WIDTH:224;POSITION:absolute;TOP:30;HEIGHT:193" filled="t" fillcolor="yellow">
<v:fill src="shili/haha.gif" type="tile" opacity=".5"/>
</v:oval>
<v:oval style="Z-INDEX:3150;LEFT:491;WIDTH:262;POSITION:absolute;TOP:46;HEIGHT:209" filled="t" fillcolor="yellow"> <v:fill src="shili/haha.gif" type="tile" opacity="1"/>
</v:oval>
<v:oval style="Z-INDEX:3150;LEFT:101;WIDTH:255;POSITION:absolute;TOP:149;HEIGHT:207" filled="t" fillcolor="red">
<v:fill src="shili/haha.gif" type="pattern" opacity="1"/>
</v:oval>
<v:oval style="Z-INDEX:3150;LEFT:336;WIDTH:262;POSITION:absolute;TOP:233;HEIGHT:209" filled="t" fillcolor="red">
<v:fill src="shili/haha.gif" type="pattern" opacity="1" color2="blue"/>
</v:oval>
<v:oval style="Z-INDEX:3150;LEFT:598;WIDTH:262;POSITION:absolute;TOP:242;HEIGHT:209" filled="t" fillcolor="red">
<v:fill src="shili/haha.gif" type="pattern" opacity="1" color2="blue" position="50,50"/>
</v:oval>
1:extrusion立体3D - 专用属性参考表
| 属性名 | 默认值 | 值类型/范围 | 用途 |
| on | false | boolean | 设置处理是否起效 |
| type | parallel | parallel,Perspective | 描述使用哪种立体模式 |
| color | white | color | 描述基本立体颜色 |
| backdepth | 35pt | number | 描述后向立体厚度值 |
| foredepth | 0pt | number | 描述前向立体厚度值 |
| metal | false | boolean | 描述是否给图形追加立体边框 |
| diffusity | 1.0 | 0.0-3.0 | 描述立体基本亮度 |
| brightness | 0.3 | 0.0-1.0 | 描述立体过度渐层的亮度 |
| rotationangle | 0,0 | Vector2D%360 | 描述立体的上下、左右360全景旋转度 |
| skewangle | 0 | -360-360 | 当type=parallel时，设置立体的倾斜度 |
2:extrusion立体3D - 应用精彩实例
即使是极道教程，也没有什么好说的，一切靠你自己分析研究、修改代码达到精通为止。对着例子、属性表自己动手，是最佳的学习方法。另外该标记相当重要，务要靠自己的努力学会！
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:line id=vml0 style="z-index:1;LEFT:239;POSITION:absolute;TOP:110" from="0,0" to="37.5pt,56.25pt">
<v:extrusion on="t" backdepth="5pt" color="white" diffusity="1"/>
</v:line>
<v:oval id=vml1 style="z-index:1;LEFT:307;WIDTH:43;POSITION:absolute;TOP:120;HEIGHT:39">
<v:extrusion on="t" backdepth="5pt" color="white" diffusity="1"/>
</v:oval>
<v:rect id=vml2 style="z-index:1;LEFT:368;WIDTH:43;POSITION:absolute;TOP:120;HEIGHT:38">
<v:extrusion on="t" backdepth="20pt" color="white" diffusity="1.2"/>
</v:rect>
<v:roundrect id=vml3 style="z-index:1;LEFT:434;WIDTH:53;POSITION:absolute;TOP:122;HEIGHT:42" arcsize="9830f" fillcolor="yellow"> <v:extrusion on="t" foredepth="20pt" backdepth="0" color="white" diffusity="1.2"/>
</v:roundrect>
<v:curve id=vml4 style="z-index:1;LEFT:368;POSITION:absolute;TOP:320" from="0,0" control1="104pt,-97pt" control2="248pt,-37pt" to="135pt,-16.5pt" filled="f" strokecolor="green" strokeweight="13.75pt"> <v:extrusion on="t" backdepth="20pt" color="#20c11b" diffusity="1.2"/>
</v:curve>
<v:arc id=vml5 style="z-index:1;LEFT:511;WIDTH:52;POSITION:absolute;TOP:118;HEIGHT:59" startangle="360" endangle="114">
<v:extrusion on="t" backdepth="10pt" color="#5e15ff" diffusity="1.2"/>
</v:arc>
<v:line id=vml0 style="z-index:1;LEFT:239;POSITION:absolute;TOP:110" from="0,0" to="37.5pt,56.25pt">
<v:extrusion on="t" backdepth="5pt" color="white" diffusity="1"/>
</v:line>
<v:oval id=vml1 style="z-index:1;LEFT:307;WIDTH:43;POSITION:absolute;TOP:120;HEIGHT:39">
<v:extrusion on="t" backdepth="5pt" color="white" diffusity="1"/>
</v:oval>
<v:rect id=vml2 style="z-index:1;LEFT:368;WIDTH:43;POSITION:absolute;TOP:120;HEIGHT:38">
<v:extrusion on="t" backdepth="20pt" color="white" diffusity="1.2"/>
</v:rect>
<v:roundrect id=vml3 style="z-index:1;LEFT:434;WIDTH:53;POSITION:absolute;TOP:122;HEIGHT:42" arcsize="9830f" fillcolor="yellow"> <v:extrusion on="t" foredepth="20pt" backdepth="0" color="white" diffusity="1.2"/>
</v:roundrect>
<v:curve id=vml4 style="z-index:1;LEFT:368;POSITION:absolute;TOP:320" from="0,0" control1="104pt,-97pt" control2="248pt,-37pt" to="135pt,-16.5pt" filled="f" strokecolor="green" strokeweight="13.75pt"> <v:extrusion on="t" backdepth="20pt" color="#20c11b" diffusity="1.2"/>
</v:curve>
<v:arc id=vml5 style="z-index:1;LEFT:511;WIDTH:52;POSITION:absolute;TOP:118;HEIGHT:59" startangle="360" endangle="114">
<v:extrusion on="t" backdepth="10pt" color="#5e15ff" diffusity="1.2"/>
</v:arc>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:rect style="z-index:1;LEFT:335;WIDTH:297;POSITION:absolute;TOP:122;HEIGHT:364">
<v:extrusion on="t" backdepth="15pt" color="#b12e26" diffusity="1.2" rotationangle="87,-13"/>
</v:rect>
<v:rect style="z-index:1;LEFT:339;WIDTH:31;POSITION:absolute;TOP:291;HEIGHT:34">
<v:extrusion on="t" backdepth="10pt" color="#b12e26" diffusity="1.2" rotationangle="86,-11"/>
</v:rect>
<v:rect style="z-index:1;LEFT:403;WIDTH:31;POSITION:absolute;TOP:217;HEIGHT:34">
<v:extrusion on="t" backdepth="10pt" color="#b12e26" diffusity="1.2" rotationangle="86,-11"/>
</v:rect>
<v:rect style="z-index:1;LEFT:335;WIDTH:297;POSITION:absolute;TOP:122;HEIGHT:364">
<v:extrusion on="t" backdepth="15pt" color="#b12e26" diffusity="1.2" rotationangle="87,-13"/>
</v:rect>
<v:rect style="z-index:1;LEFT:339;WIDTH:31;POSITION:absolute;TOP:291;HEIGHT:34">
<v:extrusion on="t" backdepth="10pt" color="#b12e26" diffusity="1.2" rotationangle="86,-11"/>
</v:rect>
<v:rect style="z-index:1;LEFT:403;WIDTH:31;POSITION:absolute;TOP:217;HEIGHT:34">
<v:extrusion on="t" backdepth="10pt" color="#b12e26" diffusity="1.2" rotationangle="86,-11"/>
</v:rect>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="z-index:1;LEFT:165;WIDTH:57;POSITION:absolute;TOP:124;HEIGHT:52">
<v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2"/>
</v:oval>
<v:oval style="z-index:1;LEFT:236;WIDTH:57;POSITION:absolute;TOP:126;HEIGHT:52" strokecolor="red" strokeweight=".75pt"> <v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t"/>
</v:oval>
<v:oval style="z-index:1;LEFT:308;WIDTH:57;POSITION:absolute;TOP:125;HEIGHT:52">
<v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="11,23"/>
</v:oval>
<v:oval style="z-index:1;LEFT:374;WIDTH:57;POSITION:absolute;TOP:125;HEIGHT:52">
<v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="8,59"/>
</v:oval>
<v:oval style="z-index:1;LEFT:427;WIDTH:57;POSITION:absolute;TOP:124;HEIGHT:52">
<v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="6,109"/>
</v:oval>
<v:oval style="z-index:1;LEFT:508;WIDTH:57;POSITION:absolute;TOP:125;HEIGHT:52">
<v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="-50,-7"/>
</v:oval>
<v:oval style="z-index:1;LEFT:580;WIDTH:57;POSITION:absolute;TOP:128;HEIGHT:52">
<v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="-35,-52"/>
</v:oval>
<v:oval style="z-index:1;LEFT:165;WIDTH:57;POSITION:absolute;TOP:204;HEIGHT:52">
<v:extrusion on="t" type="perspective" backdepth="15pt" color="#20c11b" diffusity="1.2"/>
</v:oval>
<v:oval style="z-index:1;LEFT:233;WIDTH:57;POSITION:absolute;TOP:203;HEIGHT:52">
<v:extrusion on="t" type="perspective" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t"/>
</v:oval>
<v:oval style="z-index:1;LEFT:314;WIDTH:57;POSITION:absolute;TOP:206;HEIGHT:52">
<v:extrusion on="t" type="perspective" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="59,1"/>
</v:oval>
<v:oval style="z-index:1;LEFT:390;WIDTH:57;POSITION:absolute;TOP:202;HEIGHT:52"> <v:extrusion on="t" type="perspective" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="137,51"/>
</v:oval>
<v:oval style="z-index:1;LEFT:165;WIDTH:57;POSITION:absolute;TOP:124;HEIGHT:52">
<v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2"/>
</v:oval>
<v:oval style="z-index:1;LEFT:236;WIDTH:57;POSITION:absolute;TOP:126;HEIGHT:52" strokecolor="red" strokeweight=".75pt"> <v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t"/>
</v:oval>
<v:oval style="z-index:1;LEFT:308;WIDTH:57;POSITION:absolute;TOP:125;HEIGHT:52">
<v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="11,23"/>
</v:oval>
<v:oval style="z-index:1;LEFT:374;WIDTH:57;POSITION:absolute;TOP:125;HEIGHT:52">
<v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="8,59"/>
</v:oval>
<v:oval style="z-index:1;LEFT:427;WIDTH:57;POSITION:absolute;TOP:124;HEIGHT:52">
<v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="6,109"/>
</v:oval>
<v:oval style="z-index:1;LEFT:508;WIDTH:57;POSITION:absolute;TOP:125;HEIGHT:52">
<v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="-50,-7"/>
</v:oval>
<v:oval style="z-index:1;LEFT:580;WIDTH:57;POSITION:absolute;TOP:128;HEIGHT:52">
<v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="-35,-52"/>
</v:oval>
<v:oval style="z-index:1;LEFT:165;WIDTH:57;POSITION:absolute;TOP:204;HEIGHT:52">
<v:extrusion on="t" type="perspective" backdepth="15pt" color="#20c11b" diffusity="1.2"/>
</v:oval>
<v:oval style="z-index:1;LEFT:233;WIDTH:57;POSITION:absolute;TOP:203;HEIGHT:52">
<v:extrusion on="t" type="perspective" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t"/>
</v:oval>
<v:oval style="z-index:1;LEFT:314;WIDTH:57;POSITION:absolute;TOP:206;HEIGHT:52">
<v:extrusion on="t" type="perspective" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="59,1"/>
</v:oval>
<v:oval style="z-index:1;LEFT:390;WIDTH:57;POSITION:absolute;TOP:202;HEIGHT:52"> <v:extrusion on="t" type="perspective" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="137,51"/>
</v:oval>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:rect style="z-index:1;LEFT:149;WIDTH:297;POSITION:absolute;TOP:17;HEIGHT:364" filled="t" fillcolor="blue">
<v:extrusion on="t" backdepth="15pt" color="#b12e26" diffusity="1.2" rotationangle="87,-13"/>
<v:fill type="frame" opacity=".7"/>
</v:rect>
<v:rect style="z-index:2;LEFT:247;WIDTH:297;POSITION:absolute;TOP:66;HEIGHT:364" filled="t" fillcolor="yellow"> <v:extrusion on="t" backdepth="15pt" color="#b12e26" diffusity="1.2" rotationangle="87,-13"/>
<v:fill src="shili/haha.gif" type="frame" opacity=".7"/>
</v:rect>
<v:rect style="z-index:3;LEFT:327;WIDTH:297;POSITION:absolute;TOP:116;HEIGHT:364" filled="t">
<v:extrusion on="t" backdepth="15pt" color="#b12e26" diffusity="1.2" rotationangle="87,-13"/>
<v:fill type="gradientRadial" opacity=".5" color2="yellow"/>
</v:rect>
<v:rect style="z-index:4;LEFT:416;WIDTH:297;POSITION:absolute;TOP:163;HEIGHT:364" filled="t"> <v:extrusion on="t" backdepth="15pt" color="navy" diffusity="1.2" rotationangle="87,-13"/>
<v:fill src="shili/fyw2.jpg" type="frame" opacity=".7"/>
</v:rect>
<v:rect style="z-index:1;LEFT:149;WIDTH:297;POSITION:absolute;TOP:17;HEIGHT:364" filled="t" fillcolor="blue">
<v:extrusion on="t" backdepth="15pt" color="#b12e26" diffusity="1.2" rotationangle="87,-13"/>
<v:fill type="frame" opacity=".7"/>
</v:rect>
<v:rect style="z-index:2;LEFT:247;WIDTH:297;POSITION:absolute;TOP:66;HEIGHT:364" filled="t" fillcolor="yellow"> <v:extrusion on="t" backdepth="15pt" color="#b12e26" diffusity="1.2" rotationangle="87,-13"/>
<v:fill src="shili/haha.gif" type="frame" opacity=".7"/>
</v:rect>
<v:rect style="z-index:3;LEFT:327;WIDTH:297;POSITION:absolute;TOP:116;HEIGHT:364" filled="t">
<v:extrusion on="t" backdepth="15pt" color="#b12e26" diffusity="1.2" rotationangle="87,-13"/>
<v:fill type="gradientRadial" opacity=".5" color2="yellow"/>
</v:rect>
<v:rect style="z-index:4;LEFT:416;WIDTH:297;POSITION:absolute;TOP:163;HEIGHT:364" filled="t"> <v:extrusion on="t" backdepth="15pt" color="navy" diffusity="1.2" rotationangle="87,-13"/>
<v:fill src="shili/fyw2.jpg" type="frame" opacity=".7"/>
</v:rect>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="z-index:1;LEFT:265;WIDTH:145;POSITION:absolute;TOP:116;HEIGHT:162" filled="f">
<v:fill opacity=".7"/>
<v:extrusion on="t" backdepth="20pt" color="#6fab57" diffusity="1.1"/>
</v:oval>
<v:oval style="z-index:1;LEFT:436;WIDTH:145;POSITION:absolute;TOP:124;HEIGHT:162" filled="f">
<v:fill opacity=".7"/>
<v:extrusion on="t" backdepth="20pt" color="#6fab57" diffusity="1.1" rotationangle="11,-92"/>
</v:oval>
<v:oval style="z-index:1;LEFT:557;WIDTH:145;POSITION:absolute;TOP:121;HEIGHT:162" filled="f">
<v:fill opacity=".7"/>
<v:extrusion on="t" backdepth="20pt" color="#6fab57" diffusity="1.1" rotationangle="76,17"/>
</v:oval>
<v:shape style="z-index:1;LEFT:265;WIDTH:100;POSITION:absolute;TOP:379;HEIGHT:100" coordsize="100,100" filled="f" strokecolor="black" strokeweight="15pt" path=" m0,0 l0,0,72,-73,140,1 xe"> <v:fill opacity=".7"/>
<v:extrusion on="t" backdepth="20pt" color="#6fab57" diffusity="1.1"/>
</v:shape>
<v:shape style="z-index:1;LEFT:421;WIDTH:100;POSITION:absolute;TOP:376;HEIGHT:100" coordsize="100,100" filled="f" strokecolor="black" strokeweight="15pt" path=" m0,0 l0,0,72,-73,140,1 xe">
<v:fill opacity=".7"/>
<v:extrusion on="t" backdepth="20pt" color="#6fab57" diffusity="1.1" rotationangle="-11,-83"/>
</v:shape>
<v:oval style="z-index:1;LEFT:265;WIDTH:145;POSITION:absolute;TOP:116;HEIGHT:162" filled="f">
<v:fill opacity=".7"/>
<v:extrusion on="t" backdepth="20pt" color="#6fab57" diffusity="1.1"/>
</v:oval>
<v:oval style="z-index:1;LEFT:436;WIDTH:145;POSITION:absolute;TOP:124;HEIGHT:162" filled="f">
<v:fill opacity=".7"/>
<v:extrusion on="t" backdepth="20pt" color="#6fab57" diffusity="1.1" rotationangle="11,-92"/>
</v:oval>
<v:oval style="z-index:1;LEFT:557;WIDTH:145;POSITION:absolute;TOP:121;HEIGHT:162" filled="f">
<v:fill opacity=".7"/>
<v:extrusion on="t" backdepth="20pt" color="#6fab57" diffusity="1.1" rotationangle="76,17"/>
</v:oval>
<v:shape style="z-index:1;LEFT:265;WIDTH:100;POSITION:absolute;TOP:379;HEIGHT:100" coordsize="100,100" filled="f" strokecolor="black" strokeweight="15pt" path=" m0,0 l0,0,72,-73,140,1 xe"> <v:fill opacity=".7"/>
<v:extrusion on="t" backdepth="20pt" color="#6fab57" diffusity="1.1"/>
</v:shape>
<v:shape style="z-index:1;LEFT:421;WIDTH:100;POSITION:absolute;TOP:376;HEIGHT:100" coordsize="100,100" filled="f" strokecolor="black" strokeweight="15pt" path=" m0,0 l0,0,72,-73,140,1 xe">
<v:fill opacity=".7"/>
<v:extrusion on="t" backdepth="20pt" color="#6fab57" diffusity="1.1" rotationangle="-11,-83"/>
</v:shape>
1:textbox内容 - 专用属性参考表
| 属性名 | 默认值 | 值类型/范围 | 用途 |
| inset | 7pt,3pt,7pt,3pt | 0-999pt*(1-4) | 描述距离容器内边界左/上/右/下长度 |
| false | boolean | 暗示是否被打印机打印 |
2:textbox内容 - 介绍
该标记不同于其他二级标记，特点是它即可以当做二级标记应用于VML一级标记中、也可以当作一级标记直接在网页输出超文本内容（但这个一级标记不像oval、rect、line那样支持二级标记stroke、fill、extrusion的修饰）。它基本跟HTML的span标记类似，本身没有什么独特的专用属性（就inset、print[该通用属性其他一级标记都默认为true，而它默认为false]）、也不支持VML其他二级标记的修改，而是充分利用CSS对的font/text用于文本的样式表修饰超文本内容的样式（如控制文字大小、颜色、字体、缩进、字间隔度、行间隔度、周遍的留白、排版换行等）
3:textbox内容 - 当作一级标记应用实例
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:Textbox style="FONT-SIZE:20;Z-INDEX:1;LEFT:209;COLOR:#f81ad2;WORD-BREAK:break-all;FONT-FAMILY:黑体;POSITION:absolute;TOP:99" inset="5pt,5pt,5pt,5pt" print="t">
这里是textbox文本 <BR><BR>它几乎支持CSS所有用于文本的修饰
</v:Textbox>
<v:Textbox style="OVERFLOW-Y:scroll;FONT-SIZE:20;Z-INDEX:1;LEFT:216;WIDTH:292;COLOR:#f81ad2;WORD-BREAK:break-all;FONT-FAMILY:黑体;POSITION:absolute;TOP:208;HEIGHT:79;border:1 solid black" inset="5pt,5pt,5pt,5pt" print="t">这里是 <BR>textbox文本 <BR><BR>它几乎支持
<BR>CSS所有用于文本的修饰
</v:Textbox>
<v:Textbox style="FONT-SIZE:20;Z-INDEX:1;LEFT:215;WIDTH:303;COLOR:#4c1b82;WORD-BREAK:break-all;FONT-FAMILY:黑体;POSITION:absolute;TOP:328;HEIGHT:184;border:10 ridge red;" inset="5pt,5pt,5pt,5pt" print="t">
内容同样也支持<FONT color=blue>HTML</FONT>超文本 <BR><BR>
比如<A href="http://www.microsoft.com/" target=_blank>超级连接</A> <BR><BR>
在比如用HTML插入图像<IMG src="shili/fyw1.jpg">、插入HTML表格、frame网页框等等
</v:Textbox>
<v:Textbox style="FONT-SIZE:20;Z-INDEX:1;LEFT:209;COLOR:#f81ad2;WORD-BREAK:break-all;FONT-FAMILY:黑体;POSITION:absolute;TOP:99" inset="5pt,5pt,5pt,5pt" print="t">
这里是textbox文本 <BR><BR>它几乎支持CSS所有用于文本的修饰
</v:Textbox>
<v:Textbox style="OVERFLOW-Y:scroll;FONT-SIZE:20;Z-INDEX:1;LEFT:216;WIDTH:292;COLOR:#f81ad2;WORD-BREAK:break-all;FONT-FAMILY:黑体;POSITION:absolute;TOP:208;HEIGHT:79;border:1 solid black" inset="5pt,5pt,5pt,5pt" print="t">这里是 <BR>textbox文本 <BR><BR>它几乎支持
<BR>CSS所有用于文本的修饰
</v:Textbox>
<v:Textbox style="FONT-SIZE:20;Z-INDEX:1;LEFT:215;WIDTH:303;COLOR:#4c1b82;WORD-BREAK:break-all;FONT-FAMILY:黑体;POSITION:absolute;TOP:328;HEIGHT:184;border:10 ridge red;" inset="5pt,5pt,5pt,5pt" print="t">
内容同样也支持<FONT color=blue>HTML</FONT>超文本 <BR><BR>
比如<A href="http://www.microsoft.com/" target=_blank>超级连接</A> <BR><BR>
在比如用HTML插入图像<IMG src="shili/fyw1.jpg">、插入HTML表格、frame网页框等等
</v:Textbox>
仔细分析以上代码，不难看出它就是用于输出超文本，而本身专用属性很有限（只有inset描述与容器内边界的文本间隔度，但这个属性意义并不大了，因为完全可以用CSS的padding代替）。而描述内容文本各种样式则直接使用CSS提供的丰富样式，该标记基本跟HTML的span相同。
4:textbox内容 - 当作二级标记应用实例
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:roundrect style="Z-INDEX:1;LEFT:219;WIDTH:350;POSITION:absolute;TOP:93;HEIGHT:100" arcsize="0.15">
<v:Textbox style="FONT-SIZE:20;COLOR:#f81ad2;WORD-BREAK:break-all;FONT-FAMILY:黑体;" inset="5pt,5pt,5pt,5pt" print="t">
这里是textbox文本 <BR><BR>它几乎支持CSS所有用于文本的修饰
</v:Textbox>
</v:roundrect>
<v:roundrect style="Z-INDEX:1;LEFT:219;WIDTH:350;POSITION:absolute;TOP:200;HEIGHT:100" arcsize="0.15" fillcolor="yellow" strokecolor="black" strokeweight=".75pt">
<v:Textbox style="FONT-SIZE:20;COLOR:#f81ad2;WORD-BREAK:break-all;FONT-FAMILY:黑体;" inset="8pt,8pt,8pt,8pt" print="t">
这里是textbox文本 <BR><BR>它几乎支持CSS所有用于文本的修饰
</v:Textbox>
</v:roundrect>
<v:roundrect style="Z-INDEX:1;LEFT:219;WIDTH:350;POSITION:absolute;TOP:310;HEIGHT:100" arcsize="0.15" filled="t" fillcolor="#ef69ce" stroked="t" strokecolor="black" strokeweight="5px">
<v:fill type="gradientRadial" opacity="0.6" color2="white"/>
<v:Textbox style="FONT-SIZE:20;COLOR:#f81ad2;WORD-BREAK:break-all;FONT-FAMILY:黑体;" print="t" inset="1pt,1pt,1pt,1pt">
这里是textbox文本 <BR><BR>它几乎支持CSS所有用于文本的修饰
</v:Textbox>
</v:roundrect>
<v:roundrect style="Z-INDEX:1;LEFT:219;WIDTH:350;POSITION:absolute;TOP:93;HEIGHT:100" arcsize="0.15">
<v:Textbox style="FONT-SIZE:20;COLOR:#f81ad2;WORD-BREAK:break-all;FONT-FAMILY:黑体;" inset="5pt,5pt,5pt,5pt" print="t">
这里是textbox文本 <BR><BR>它几乎支持CSS所有用于文本的修饰
</v:Textbox>
</v:roundrect>
<v:roundrect style="Z-INDEX:1;LEFT:219;WIDTH:350;POSITION:absolute;TOP:200;HEIGHT:100" arcsize="0.15" fillcolor="yellow" strokecolor="black" strokeweight=".75pt">
<v:Textbox style="FONT-SIZE:20;COLOR:#f81ad2;WORD-BREAK:break-all;FONT-FAMILY:黑体;" inset="8pt,8pt,8pt,8pt" print="t">
这里是textbox文本 <BR><BR>它几乎支持CSS所有用于文本的修饰
</v:Textbox>
</v:roundrect>
<v:roundrect style="Z-INDEX:1;LEFT:219;WIDTH:350;POSITION:absolute;TOP:310;HEIGHT:100" arcsize="0.15" filled="t" fillcolor="#ef69ce" stroked="t" strokecolor="black" strokeweight="5px">
<v:fill type="gradientRadial" opacity="0.6" color2="white"/>
<v:Textbox style="FONT-SIZE:20;COLOR:#f81ad2;WORD-BREAK:break-all;FONT-FAMILY:黑体;" print="t" inset="1pt,1pt,1pt,1pt">
这里是textbox文本 <BR><BR>它几乎支持CSS所有用于文本的修饰
</v:Textbox>
</v:roundrect>
可以看出，它也可以充当二级标记作为oval、rect、roundrect等图形的内容。你也许会问，我完全可以直接在图形内插入HTML超文本内容，还有必要用textbox？回答是看你用VML进行什么样的开发，如果只是简单的绘图那么可以说没必要，但如果进行的是WEB 3D网页开发、DVML编程，那么用textbox在某种情况可以剩时、剩力、剩代码、更好的组织性。
1:imagedata背景图片 - 专用属性参考表
| 属性名 | 默认值 | 值类型/范围 | 用途 |
| src | null | URLtext | 描述图像URL地址来源 |
| grayscale | false | boolean | 描述图像是否为黑白效果 |
| bilevel | false | boolean | 描述图像是否为漫画卡通效果 |
| blacklevel | null | number/-0.4-0.4 | 描述图像亮度 |
| gain | null | number/0-100 | 描述图像对比度 |
| gamma | null | number/0.9-0.1 | 描述图像颜色清晰度 |
| chromakey | none | colortext | 描述图像透明过滤的颜色 |
| cropleft | null | number/0%-100% | 描述图像左边的裁剪 |
| cropright | null | number/0%-100% | 描述图像右边的裁剪 |
| croptop | null | number/0%-100% | 描述图像上边的裁剪 |
| cropbottom | null | number/0%-100% | 描述图像下边的裁剪 |
2:imagedata背景图片 - 介绍
也许你又会问，二级标记fill不是有很强背景图像填充的方法么，怎么还有个imagedata背景图片？我的回答是“不管是实用/常用与否，VML为我们想的很周到”。的确fill的背景图像填充是很强的、效果眼花缭乱，而又的确imagedata我认为使用的机会不会很多，但不可否认imagedata我曾经实际应用中也有一些特长。请先看下面几个imagedata的例子，它的属性作用跟一级标记image一摸一样，只不过是用它插入的图片必须依附于像oval、rect、roundrect、arc等图形当中，当作平铺于该图形底下的“背景/场景图像”
3:imagedata背景图片 - 实例讲解
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:1;LEFT:50;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3"/>
<v:oval style="Z-INDEX:1;LEFT:160;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3">
<v:imagedata src="shili/fyw2.jpg"/>
</v:oval>
<v:oval style="Z-INDEX:1;LEFT:270;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3">
<v:imagedata bilevel=t src="shili/fyw2.jpg"/>
</v:oval>
<v:oval style="Z-INDEX:1;LEFT:380;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3">
<v:imagedata cropleft="25%" croptop="20%" cropright="20%" cropbottom="20%" src="shili/fyw2.jpg"/>
</v:oval>
<v:oval style="Z-INDEX:1;LEFT:50;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3"/>
<v:oval style="Z-INDEX:1;LEFT:160;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3">
<v:imagedata src="shili/fyw2.jpg"/>
</v:oval>
<v:oval style="Z-INDEX:1;LEFT:270;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3">
<v:imagedata bilevel=t src="shili/fyw2.jpg"/>
</v:oval>
<v:oval style="Z-INDEX:1;LEFT:380;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3">
<v:imagedata cropleft="25%" croptop="20%" cropright="20%" cropbottom="20%" src="shili/fyw2.jpg"/>
</v:oval>
上例我们插入的图片是JPG格式的矩形图片，你只少应从例子中理解用imagedata插入的图像必须依附于图形、如果图像本事是JPG矩形的图片那么就会平铺于图形之下、图形本身的fillcolor填充也会无效、裁剪后被自动拉伸缩放剩下的图形部分
在看下面用gif动画的例子
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:1;LEFT:50;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3"/>
<v:oval style="Z-INDEX:1;LEFT:160;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3">
<v:extrusion on="t" backdepth="20pt" color="#6fab57" diffusity="1.1"/>
<v:imagedata src="shili/haha.gif"/>
</v:oval>
<v:oval style="Z-INDEX:1;LEFT:270;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3">
<v:imagedata bilevel=t src="shili/haha.gif"/>
</v:oval>
<v:oval style="Z-INDEX:1;LEFT:380;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3">
<v:imagedata cropleft="25%" croptop="20%" cropright="20%" cropbottom="20%" src="shili/haha.gif"/>
</v:oval>
<v:oval style="Z-INDEX:1;LEFT:50;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3"/>
<v:oval style="Z-INDEX:1;LEFT:160;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3">
<v:extrusion on="t" backdepth="20pt" color="#6fab57" diffusity="1.1"/>
<v:imagedata src="shili/haha.gif"/>
</v:oval>
<v:oval style="Z-INDEX:1;LEFT:270;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3">
<v:imagedata bilevel=t src="shili/haha.gif"/>
</v:oval>
<v:oval style="Z-INDEX:1;LEFT:380;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3">
<v:imagedata cropleft="25%" croptop="20%" cropright="20%" cropbottom="20%" src="shili/haha.gif"/>
</v:oval>
上例我们插入的图片是gif格式的带透明部分不规则动画图片，就跟JPG矩形图片有些不同之出了，由于gif动画图形的不规则问题，显现出图形本身的fillcolor颜色
4:imagedata背景图片 - 应用价值探讨
如一开始所说，imagedata的实际应用价值远不如fill、stroke等二级标记，但若制作照片框、图像浏览、处理类的DVML程序到还不错，下面给个很简单的例子。
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<center>
<input type='button' value="放大" onclick="rect1.style.width=parseInt(rect1.style.width)+30;rect1.style.height=parseInt(rect1.style.height)+30;rect1.style.left=parseInt(rect1.style.left)-15;rect1.style.top=parseInt(rect1.style.top)-15;">
<input type='button' value="缩小" onclick="rect1.style.width=parseInt(rect1.style.width)-30;rect1.style.height=parseInt(rect1.style.height)-30;rect1.style.left=parseInt(rect1.style.left)+15;rect1.style.top=parseInt(rect1.style.top)+15;">
<input type='button' value="增加与取消漫画风格" onclick="img1.bilevel=!img1.bilevel">
</center>
<v:rect id="rect1" style="Z-INDEX:3334;LEFT:296px;WIDTH:350px;POSITION:absolute;TOP:200px;HEIGHT:250px" arcsize="6554f" fillcolor="white" stroked="t" strokecolor="#b0774c" strokeweight="15pt">
<v:stroke filltype="pattern" src="shili/fyw2.jpg" opacity="1" startarrow="none" endarrow="none"/>
<v:imagedata id=img1 src="shili/fyw2.jpg"/>
</v:rect>
<center>
<input type='button' value="放大" onclick="rect1.style.width=parseInt(rect1.style.width)+30;rect1.style.height=parseInt(rect1.style.height)+30;rect1.style.left=parseInt(rect1.style.left)-15;rect1.style.top=parseInt(rect1.style.top)-15;">
<input type='button' value="缩小" onclick="rect1.style.width=parseInt(rect1.style.width)-30;rect1.style.height=parseInt(rect1.style.height)-30;rect1.style.left=parseInt(rect1.style.left)+15;rect1.style.top=parseInt(rect1.style.top)+15;">
<input type='button' value="增加与取消漫画风格" onclick="img1.bilevel=!img1.bilevel">
</center>
<v:rect id="rect1" style="Z-INDEX:3334;LEFT:296px;WIDTH:350px;POSITION:absolute;TOP:200px;HEIGHT:250px" arcsize="6554f" fillcolor="white" stroked="t" strokecolor="#b0774c" strokeweight="15pt">
<v:stroke filltype="pattern" src="shili/fyw2.jpg" opacity="1" startarrow="none" endarrow="none"/>
<v:imagedata id=img1 src="shili/fyw2.jpg"/>
</v:rect>
虽然用rect+image这两个一级标记也可以模拟实现上述效果，但DVML编程恐怕就需要花费很多关于坐标定位上的代码了（要更新rect也要更新image）。而imagedata是直接依附于rect内部的，坐标、大小更新时只需控制rect即可，简化了这方面编程的烦琐。
1:textpath文本路径 - 专用属性参考表
| 属性名 | 默认值 | 值类型/范围 | 用途 |
| on | false | boolean | 设置处理是否起效 |
| string | null | string | 描述使用的文本 |
| fitpath | false | boolean | 描述是否自动缩放文本已占满路径 |
| fitshape | false | boolean | Stretches the text path out to the edges of the shapebox. |
| trim | false | boolean | Removes any additional space reserved for ascenders and descenders if not used. |
| xscale | false | boolean | Use straight x measurement instead of measuring along the path. |
2:textpath文本路径 - 实例讲解
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:1;LEFT:149;WIDTH:107;POSITION:absolute;TOP:137;HEIGHT:99" fillcolor="yellow" strokecolor="red" strokeweight="1.5pt"/>
<v:oval style="Z-INDEX:1;LEFT:290;WIDTH:107;POSITION:absolute;TOP:131;HEIGHT:99" filled="t" fillcolor="white" strokecolor="red" strokeweight="1.5pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-SIZE:30;FONT-FAMILY:黑体" on="t" fitpath="f" string="路径文字化"/>
</v:oval>
<v:oval style="Z-INDEX:1;LEFT:477;WIDTH:107;POSITION:absolute;TOP:136;HEIGHT:99" filled="t" fillcolor="white" strokecolor="red" strokeweight="1.5pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-SIZE:30;FONT-FAMILY:宋体" on="t" fitpath="t" string="路径文字化"/>
</v:oval>
<v:oval style="Z-INDEX:1;LEFT:660;WIDTH:107;POSITION:absolute;TOP:140;HEIGHT:99" filled="t" fillcolor="white" strokecolor="red" strokeweight="1.5pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-SIZE:30;FONT-FAMILY:宋体" on="t" fitpath="t" string="IIIIIIIIII"/>
</v:oval>
<v:oval style="Z-INDEX:1;LEFT:149;WIDTH:107;POSITION:absolute;TOP:137;HEIGHT:99" fillcolor="yellow" strokecolor="red" strokeweight="1.5pt"/>
<v:oval style="Z-INDEX:1;LEFT:290;WIDTH:107;POSITION:absolute;TOP:131;HEIGHT:99" filled="t" fillcolor="white" strokecolor="red" strokeweight="1.5pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-SIZE:30;FONT-FAMILY:黑体" on="t" fitpath="f" string="路径文字化"/>
</v:oval>
<v:oval style="Z-INDEX:1;LEFT:477;WIDTH:107;POSITION:absolute;TOP:136;HEIGHT:99" filled="t" fillcolor="white" strokecolor="red" strokeweight="1.5pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-SIZE:30;FONT-FAMILY:宋体" on="t" fitpath="t" string="路径文字化"/>
</v:oval>
<v:oval style="Z-INDEX:1;LEFT:660;WIDTH:107;POSITION:absolute;TOP:140;HEIGHT:99" filled="t" fillcolor="white" strokecolor="red" strokeweight="1.5pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-SIZE:30;FONT-FAMILY:宋体" on="t" fitpath="t" string="IIIIIIIIII"/>
</v:oval>
textpath文本路径处理功能是VML一个很实用、很有用的二级标记，也许你还很陌生，所以这一章节我要详细的讲述它。
对于以上代码的分析：
1:应用textpath文本路径，必须增加<path textpathok="t"/>这个二级标记，它表示生成该图形文本路径，否则不行。
2:文字的颜色，继承其载体(oval)的strokecolor边框颜色属性
3:文字的粗度，继承其载体的strokeweight边框粗度属性
4:文字的背景，继承其载体的fillcolor填充属性，只是未放大看不出来，不过我会在接下的例子演示
5:第一个处理的fitpath="f"，表示文字不自动缩放占满整个路径，文字大小以CSS的font-size:;定义为30px，由于字数少所以它未占满
6:而其他的fitpath="t"的，运行效果表示，它们都可以自动缩放占满整个路径，而相对CSS定义的font-size字大小为50px就无效了
7:由于其on属性默认为false，所以我们必须增加on="t"表示textpath文本路径处理起作用
在继续看例子：
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:line style="Z-INDEX:1;LEFT:220;POSITION:absolute;TOP:128" from="0,0" to="135pt,-11.25pt" filled="t" fillcolor="#f9ec18" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath on="t" fitpath="t" string="VML极道教程"/>
</v:line>
<v:line style="Z-INDEX:1;LEFT:212;POSITION:absolute;TOP:211" from="0,0" to="346.5pt,-37.5pt" filled="t" fillcolor="#f9ec18" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath on="t" fitpath="t" string="VML极道教程"/>
</v:line>
<v:rect style="Z-INDEX:1;LEFT:232;WIDTH:269;POSITION:absolute;TOP:302;HEIGHT:167" filled="t" fillcolor="#5aea81" strokecolor="#2174ff" strokeweight=".75pt"> <v:path textpathok="t"/>
<v:textpath style="FONT-FAMILY:Wingdings" on="t" fitpath="t" string="dasjkvklGHBGJGT"/>
<v:fill type="gradientRadial" opacity=".8" color2="#f32098"/>
</v:rect>
<v:line style="Z-INDEX:1;LEFT:220;POSITION:absolute;TOP:128" from="0,0" to="135pt,-11.25pt" filled="t" fillcolor="#f9ec18" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath on="t" fitpath="t" string="VML极道教程"/>
</v:line>
<v:line style="Z-INDEX:1;LEFT:212;POSITION:absolute;TOP:211" from="0,0" to="346.5pt,-37.5pt" filled="t" fillcolor="#f9ec18" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath on="t" fitpath="t" string="VML极道教程"/>
</v:line>
<v:rect style="Z-INDEX:1;LEFT:232;WIDTH:269;POSITION:absolute;TOP:302;HEIGHT:167" filled="t" fillcolor="#5aea81" strokecolor="#2174ff" strokeweight=".75pt"> <v:path textpathok="t"/>
<v:textpath style="FONT-FAMILY:Wingdings" on="t" fitpath="t" string="dasjkvklGHBGJGT"/>
<v:fill type="gradientRadial" opacity=".8" color2="#f32098"/>
</v:rect>
对于以上代码的分析：
1:这次你应该看出文字的背景是继承其载体fillcolor="yellow"黄色的
2:而且line线也支持路径（其实curve,shape,roundrect等均支持文本路径，只有image,textbox不支持文本路径）
3:最后一个输出了好多的图形，这是因为CSS用FONT-FAMILY:;将它的字体定义为“Wingdings”。Wingdings是一种图形字体，其他还有“Wingdings 2、Wingdings 3、Webdings、Marlett”字体均为图形字体
4:最后一个还追加了fill填充渐变颜色效果，使图形字体看起来更好看
在继续看例子：
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:curve style="Z-INDEX:1;LEFT:199;POSITION:absolute;TOP:175" control1="15pt,-90pt" control2="271.5pt,73.5pt" to="405.75pt,-26.25pt" filled="t" fillcolor="#f9ec18" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-FAMILY:Wingdings" on="t" fitpath="t" string="JKLMNOPQ"/>
</v:curve>
<v:curve style="Z-INDEX:1;LEFT:194;POSITION:absolute;TOP:280" control1="15pt,-90pt" control2="271.5pt,73.5pt" to="405.75pt,-26.25pt" filled="t" fillcolor="#2b2ae3" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-FAMILY:Wingdings" on="t" fitpath="t" string="JKLMNOPQ"/>
<v:extrusion on="t" backdepth="20pt" color="#e9fd92" diffusity="1.1"/>
<v:fill type="gradientRadial" opacity=".8" color2="#fa7b4c"/>
</v:curve>
<v:curve style="Z-INDEX:1;LEFT:203;POSITION:absolute;TOP:409" from="0,0" control1="15pt,-90pt" control2="271.5pt,73.5pt" to="405.75pt,-26.25pt" filled="t" fillcolor="#2b2ae3" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-FAMILY:Wingdings" on="t" fitpath="t" string="JKLMNOPQ"/>
<v:extrusion on="t" backdepth="20pt" color="#e9fd92" diffusity="1.1" rotationangle="14,-84"/>
<v:fill type="gradientRadial" opacity=".8" color2="#fa7b4c"/>
</v:curve>
<v:curve style="Z-INDEX:1;LEFT:199;POSITION:absolute;TOP:175" control1="15pt,-90pt" control2="271.5pt,73.5pt" to="405.75pt,-26.25pt" filled="t" fillcolor="#f9ec18" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-FAMILY:Wingdings" on="t" fitpath="t" string="JKLMNOPQ"/>
</v:curve>
<v:curve style="Z-INDEX:1;LEFT:194;POSITION:absolute;TOP:280" control1="15pt,-90pt" control2="271.5pt,73.5pt" to="405.75pt,-26.25pt" filled="t" fillcolor="#2b2ae3" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-FAMILY:Wingdings" on="t" fitpath="t" string="JKLMNOPQ"/>
<v:extrusion on="t" backdepth="20pt" color="#e9fd92" diffusity="1.1"/>
<v:fill type="gradientRadial" opacity=".8" color2="#fa7b4c"/>
</v:curve>
<v:curve style="Z-INDEX:1;LEFT:203;POSITION:absolute;TOP:409" from="0,0" control1="15pt,-90pt" control2="271.5pt,73.5pt" to="405.75pt,-26.25pt" filled="t" fillcolor="#2b2ae3" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-FAMILY:Wingdings" on="t" fitpath="t" string="JKLMNOPQ"/>
<v:extrusion on="t" backdepth="20pt" color="#e9fd92" diffusity="1.1" rotationangle="14,-84"/>
<v:fill type="gradientRadial" opacity=".8" color2="#fa7b4c"/>
</v:curve>
对于以上代码的分析：
1:这次你看到的就是更多的图形字体，并演示他们按照曲线的轨迹路径排列
2:第二个则同时增加了填充、立体效果，使图形更加的好看
3:第三个则使用了extrusion的rotationangle属性让立体以不同的角度呈现
在继续看例子：
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:1;LEFT:286;WIDTH:147;POSITION:absolute;TOP:5;HEIGHT:163" filled="t" fillcolor="#f9ec18" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-FAMILY:Webdings" on="t" fitpath="t" string="û"/>
<v:extrusion on="t" foredepth="0" backdepth="15pt" color="#e9fd92" diffusity="1.1"/>
</v:oval>
<v:oval style="Z-INDEX:1;LEFT:284;WIDTH:153;POSITION:absolute;TOP:258;HEIGHT:155" filled="t" fillcolor="yellow" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-FAMILY:Webdings" on="t" fitpath="t" string="û"/>
<v:fill src="shili/fyw2.jpg" type="frame" opacity=".8"/>
<v:extrusion on="t" foredepth="0" backdepth="15pt" color="#e9fd92" diffusity="1.1"/>
</v:oval>
<v:oval style="Z-INDEX:1;LEFT:286;WIDTH:147;POSITION:absolute;TOP:5;HEIGHT:163" filled="t" fillcolor="#f9ec18" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-FAMILY:Webdings" on="t" fitpath="t" string="û"/>
<v:extrusion on="t" foredepth="0" backdepth="15pt" color="#e9fd92" diffusity="1.1"/>
</v:oval>
<v:oval style="Z-INDEX:1;LEFT:284;WIDTH:153;POSITION:absolute;TOP:258;HEIGHT:155" filled="t" fillcolor="yellow" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-FAMILY:Webdings" on="t" fitpath="t" string="û"/>
<v:fill src="shili/fyw2.jpg" type="frame" opacity=".8"/>
<v:extrusion on="t" foredepth="0" backdepth="15pt" color="#e9fd92" diffusity="1.1"/>
</v:oval>
对于以上代码的分析：
1:也许你惊呼“VML世界地图”！？其实也没什么好惊讶的，这只不过是textpath使用了Webdings字体而且只用了一个字母，而后我们给它增加了立体，使它有立体感
2:而第二个我们又给其增加了fill背景填充，它更加好看了而已，你甚至还可以换成gif动画……
3:综合以上所有例子，由次可见textpath的有用之处了吧？？？
4:你如果想知道所有的“Wingdings、Wingdings 2、Wingdings 3、Webdings、Marlett”字体，可以从LD5的“工具”菜单选择“综合工具包”，该工具包里即有这方面资料。或者你直接点击此处 打开（我以将该工具追加于VML极道教程之中^-^）。
1:VML标记学习总结
直到现在，你已经经历了前面24章节VML标记、属性的学习，如果过程中你用心学了、动脑思考了、动手反复测试了、并自认为对VML标记已经很了解了。如果你真是这么想…………，那么我很高兴的告诉你，你已经精通了VML语言、已经熟悉或精通了VML所有标记/属性的50%-95%、具备去教别人的水准了。而我对你的期望值，是你至少已经掌握前面24章节所有涉及的知识、标记、属性的70%，这70%凝聚着VML所有最简单的、最实用的、最重要的。而剩下的那25%很复杂的、不实用的、不重要的，你精通了更好，不精通也没有关系，因为以后你很少会用得到。
前面24章节提及的约70%（较简单、实用的我建议一定精通或掌握）+25%（建议有一定认识/了解），还有剩下的5%（VML最复杂难懂、shape高精度数学/函数绘图相关、最不可能用到的），我会在本章节下面简单的说一说
假如我所描述的70%（例如就包括专用属性参考表红色标识的重要属性），你已经掌握，那么你现在即算完成“精通VML标记”这一大章的学业，已经算是一位VML高手了，否则我劝你在从头到尾、重新温习一下前面所有的24章节，直到会了全部的70%、或对自己有信心了为止。
如果你有更高的追求，可以进阶修行“DVML编程”这一大章，从VML静态绘图向DVML动态编程继续前进、从小用VML跨越到VML与用户互动、动画开发、游戏开发、服务器端程序开发等等。在以后你就可以凭借你的“VML标记知识+DVML编程知识+FlashVml(闪耀之星)”开发任何基于VML的WEB大小应用了。
否则你现在就可以直接使用FlashVml+你所学到的VML标记知识，进行普通的VMLWEB应用了。
2:VML的其他标记
我曾说过VML的强大功用、成熟与完善，前面24节所提及的概念、知识、标记、属性。是综合了我对VML的所有概念、知识、标记、属性的所学，然后精挑细选后又一一整理，按照我认为的难度、逻辑、实用程度进行课程排序。对今后你会较常用到的进行了深入/通俗的分析、讲解，不常用到的也给出了抽象/简单的范例、说明。
另外我所知的VML标记、属性还有一些，有些是不会用到的、意义不大的，还有些有一定应用意义但这些有不少连我也不熟悉、个别的甚至不知怎么用/是什么概念，更不可能在详细的教育、分析于你听了。我只能整理整理，不懂的就全且用W3C提供的英文说明，待汝有用之日来取。
3:path规则与路径 - 二级标记
| 属性名 | 默认值 | 值类型/范围 | 用途 |
| v | m l e | string | 描述shapetype形状模版的路径 |
| limo | 0,0 | vector2D | A point along the x and y dimensions of a shape where the shape will limo stretch. |
| fillok | true | boolean | 暗示一级标记是否有填充 |
| strokeok | true | boolean | 暗示一级标记是否有边框 |
| shadowok | true | boolean | 暗示一级标记是否支持阴影 |
| arrowok | false | boolean | 暗示一级标记是否支持箭头 |
| gradientshapeok | false | boolean | 暗示fill是否依照比例描述gradientradial渐变 |
| textpathok | false | boolean | 暗示一级标记是否支持文本路径 |
| textboxrect | null | string | 描述textbox内容与容器内边界的距离 |
该标记还算是有些用处、在某些时候甚至于必须使用，不过有用的概念、知识、实例，前面shape、shapetype、textbox相关的章节已经提及了，在这里不在阐述。
4:formulas - shape、shapetype、path_v函数计算实例
This sub-element may appear inside a shape or a shapetype to define formulas that can vary the path of a shape, its inscribed text rectangles, and connection sites. Formula values change as the adj values change on the shape. Formulas can reference other formulas defined earlier in the same formulas element.
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:shape style="Z-INDEX:1;LEFT:271;WIDTH:200;POSITION:absolute;TOP:225;HEIGHT:200" coordsize="21600,21600" filled="t" fillcolor="white" path="m0@0l@1@0@1,0@2,0@2@0,21600@0,10800,21600xe">
<v:formulas>
<v:f eqn="sum #0 0 0"/>
<v:f eqn="sum #1 0 0"/>
<v:f eqn="sum height 0 #1"/>
<v:f eqn="sum 10800 0 #1"/>
<v:f eqn="sum width 0 #0"/>
<v:f eqn="prod @4 @3 10800"/>
<v:f eqn="sum width 0 @5"/>
</v:formulas>
</v:shape>
<v:shape style="Z-INDEX:1;LEFT:271;WIDTH:200;POSITION:absolute;TOP:225;HEIGHT:200" coordsize="21600,21600" filled="t" fillcolor="white" path="m0@0l@1@0@1,0@2,0@2@0,21600@0,10800,21600xe">
<v:formulas>
<v:f eqn="sum #0 0 0"/>
<v:f eqn="sum #1 0 0"/>
<v:f eqn="sum height 0 #1"/>
<v:f eqn="sum 10800 0 #1"/>
<v:f eqn="sum width 0 #0"/>
<v:f eqn="prod @4 @3 10800"/>
<v:f eqn="sum width 0 @5"/>
</v:formulas>
</v:shape>
5:handles - 计算公式与输出规则定义
This sub-element may appear inside a shape or a shapetype to define user interface elements which can vary the adj values on the shape, thereby changing the value of formulas and the rendering of a path based on formulas and adj values.
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:shape style="Z-INDEX:1;LEFT:271;WIDTH:200;POSITION:absolute;TOP:225;HEIGHT:200" coordsize="21600,21600" filled="t" fillcolor="white" path="m0@0l@1@0@1,0@2,0@2@0,21600@0,10800,21600xe">
<v:handles>
<v:h position=null polar=null map="0, 1000" invx="false"
invy="false" switch="false" xrange="0, 1000"
yrange="0, 1000" radiusrange="0, 1000"/>
</v:handles>
<v:formulas>
<v:f eqn="sum #0 0 0"/>
<v:f eqn="sum #1 0 0"/>
<v:f eqn="sum height 0 #1"/>
<v:f eqn="sum 10800 0 #1"/>
<v:f eqn="sum width 0 #0"/>
<v:f eqn="prod @4 @3 10800"/>
<v:f eqn="sum width 0 @5"/>
</v:formulas>
</v:shape>
<v:shape style="Z-INDEX:1;LEFT:271;WIDTH:200;POSITION:absolute;TOP:225;HEIGHT:200" coordsize="21600,21600" filled="t" fillcolor="white" path="m0@0l@1@0@1,0@2,0@2@0,21600@0,10800,21600xe">
<v:handles>
<v:h position=null polar=null map="0, 1000" invx="false"
invy="false" switch="false" xrange="0, 1000"
yrange="0, 1000" radiusrange="0, 1000"/>
</v:handles>
<v:formulas>
<v:f eqn="sum #0 0 0"/>
<v:f eqn="sum #1 0 0"/>
<v:f eqn="sum height 0 #1"/>
<v:f eqn="sum 10800 0 #1"/>
<v:f eqn="sum width 0 #0"/>
<v:f eqn="prod @4 @3 10800"/>
<v:f eqn="sum width 0 @5"/>
</v:formulas>
</v:shape>
6:office skew歪斜艺术 - 二级标记
| 属性名 | 默认值 | 值类型/范围 | 用途 |
| on | false | boolean | 暗示一级标记是否支持歪斜 |
| ext | view | edit,view,backwardCompatible | 暗示歪斜被显示的方式 |
| matrix | 1,0,0,1,0,0 | string | 为歪斜定义一种远景变换 |
| offset | 0,0 | -0.5-0.5,-0.5-0.5 | 描述歪斜的抵销值 |
| origin | 0,0 | -0.5-0.5,-0.5-0.5 | 描述歪斜的起源 |
使用该标记必须定义xmlns:o="urn:schemas-microsoft-com:office:office"名域命名
7:更全面的英文参考 - 来自MSDN、W3C
MSDN-VML首页
MSDN-VML参考
W3C-VML1998最初草案
《VML极道教程》第一卷[精通VML语言] 全文完！
2005-2-19 0:42:57 - 沐缘华
博文来源：http://www.cnblogs.com/GeneralXU/archive/2007/05/29/763246.html