本系列文章導航
VML極道教程(一) VML介紹
VML極道教程(二) VML入門
VML極道教程(三) 標記實戰與line線
VML極道教程(四) oval圓rect矩型
VML極道教程(五) RoundRect圓矩型
VML極道教程(六) image圖片
VML極道教程(七) polyline多邊型
VML極道教程(八) shape多邊型.shapetype模版.shape與curve曲線
VML極道教程(九) background背景
VML極道教程(十) group集合容器.vmlframe圖形引用
VML極道教程(十一) 2級標記stroke邊框，shadow陰影
VML極道教程(十二) VML編程大結局
2級標記stroke邊框 . shadow陰影
《VML極道教程》原著:沐緣華
1章18節:2級標記stroke邊框
1:2級標記的通用屬性
以前，我們常說的VML通用屬性，是針對像oval、rect、roundrect這樣的一級標記而言的（只是“極道”的學習規則，我不會在你還是一隻“VML菜鳥”時，用太多的一級標記、二級標記這些難懂的詞語）。而對於大多數的二級標記，是不支援的，只有一個例外，像Textbox內容，即能當作一級標記又能當作二級標記。不過id 這個通用屬性，是所有的一、二級標記均支援的屬性。
2:stroke邊框 - 專用屬性參考表
| 屬性名稱 |
預設值 |
實值型別/範圍 |
用途 |
| on |
true |
boolean |
設定處理是否起效 |
| weight |
1pt |
number |
描述邊框粗度 |
| color |
black |
color |
描述邊框顏色 |
| opacity |
1.0 |
0.0-1.0 |
描述邊框透明度 |
| dashstyle |
solid |
solid,dot,dash,dashdot,longdash,longdashdot,longdashdotdot,shortdot,shortdash,shortdashdot,shortdashdotdot |
描述邊框的線條樣式 |
| filltype |
solid |
solid,tile,pattern,frame |
描述如何填充邊框 |
| src |
null |
URLstring |
當filltype!=solid時，指定填充邊框的映像地址 |
| imagesize |
auto |
Vector2D |
當filltype!=solid時，描述映像放大倍數 |
| imagealignshape |
true |
boolean |
當filltype!=solid時，描述映像是否置中對齊 |
| color2 |
null |
color |
當filltype=pattern時，描述映像的融合背景色 |
| startarrow |
none |
none,block,classic,diamond,oval,open,chevron,doublechevron |
描述線起點的箭頭樣式 |
| endarrow |
none |
none,block,classic,diamond,oval,open,chevron,doublechevron |
描述線終點的箭頭樣式 |
| startarrowwidth |
medium |
narrow,medium,wide |
當startarrow!=none時，描述起點箭頭的寬度 |
| startarrowlength |
medium |
short,medium,long |
當startarrow!=none時，描述起點箭頭的高度 |
| endarrowwidth |
medium |
narrow,medium,wide |
當endarrow!=none時，描述起點箭頭的寬度 |
| endarrowlength |
medium |
short,medium,long |
當endarrow!=none時，描述起點箭頭的高度 |
| miterlimit |
8.0 |
number |
描述邊框關節位置的厚度 |
| joinstyle |
round |
round(rounded join),bevel(beveled join),miter(miter join) |
描述邊框參加的樣式 |
| endcap |
round |
flat,square,round |
描述邊框結束部分 |
3:開始二級標記的課程！
通過以前所有章節的學習、在到從本章節開始，就表示你已對VML有了相當的認識、掌握了幾乎所有的VML一級標記、如果之前的內容你認真學習了的話。
VML二級標記，你可以這樣理解：“它是專門為VML一級標記設計的、它們可以修飾幾乎所有用VML一級標記繪製的圓形、矩形、弧形、曲線等幾乎所有形狀，從頭到腳、從邊框到背景、從立體到背景圖片、從路徑軌跡到超常值內容、等等。。二級標記可以將基礎的圖形封裝成各式各樣千奇百怪、二級標記可以說是一級標記的一件華麗的衣服”。
不過，學習二級標記，我不會把二級標記的所有屬性一一示範、講解，更不會在去講之前那些基礎的知識（如果你不會，那現在就去看、去學、直到會了、能聽懂本章節以後的課程我所說的話為止，我也不會在忌諱不加解釋的使用一些諸如交接點/通用屬性/專用屬性/Vector3D/DVML/coorsize/group/line/curve等等詞語）。並僅提供關於該二級屬性的常識問題以及一些比較有用的、實用的、好用的、抽象的屬性示範例子，你可以通過XXX二級標記專用屬性參考表提供的資料，自行更改例題，從而自己瞭解、掌握XX屬性是什麼效果、什麼用、我怎麼挪用應用到XX一級標記圖形中。
4:二級標記的相容性問題
學習中你已知道，二級標記幾乎可以“從頭到腳”的處理圖形幾乎任何部分。但是如果圖形本身“只有頭沒有腳”，那麼你用專門處理“腳”的二級標記去處理它？不用說，肯定是無效的。那“腳”是什麼哪？舉個例子，line它只是線只有邊框概念而沒有填充概念，也就是說stroke二級標記可以處理它但fill(背景填充)二級標記就無法處理它。在說image，它只是映像，沒有背景填充的概念，所以fill對它也無法處理。在拿oval、rect、roundrect這些圖形跟line線相比，前者由雩都有背景概念，所以就支援fill填充。但是，它們卻無法使用“箭頭”，不然，你說oval、rect哪裡是起點？哪裡是終點？箭頭給它加到哪裡合適？而line、arc、curve、polyline、shape卻不同，他們都是線條類組成的、或根本就是一條line線，它門有線條起點、終點的概念，所以它們就支援在起點、終點增加箭頭。請看下面給圖形增加箭頭的例子對比
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">
<v:line style="Z-INDEX:1;LEFT:225;POSITION:absolute;TOP:110" from="0,0" to="43.5pt,8.25pt" stroked="t" strokecolor="black" strokeweight=".75pt">
<v:stroke opacity="1" startarrow="none" endarrow="classic"/>
</v:line>
<v:arc style="Z-INDEX:1;LEFT:242;WIDTH:61;POSITION:absolute;TOP:169;HEIGHT:71" startangle="359" endangle="119" fillcolor="white" stroked="t" strokeweight="5">
<v:stroke color="red" opacity=".5" startarrow="oval" endarrow="classic" endarrowwidth="wide" endarrowlength="long"/>
</v:arc>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">
<v:oval style="Z-INDEX:1;LEFT:330;WIDTH:58;POSITION:absolute;TOP:95;HEIGHT:58">
<v:stroke opacity="1" startarrow="none" endarrow="classic"/>
</v:oval>
<v:rect style="Z-INDEX:1;LEFT:335;WIDTH:53;POSITION:absolute;TOP:177;HEIGHT:56" fillcolor="white" stroked="t" strokecolor="black" strokeweight=".75pt">
<v:stroke color="red" opacity=".5" startarrow="oval" endarrow="classic" endarrowwidth="wide" endarrowlength="long"/>
</v:rect>
顯示情況證明oval、rect就不支援箭頭，不過卻支援邊框顏色定義。 5:stroke邊框 - 精彩執行個體 我製作了幾個抽象的例子，原始碼自行分析，並請對照專用屬性工作表修改（其實學習二級標記就是學屬性！），篇幅問題不一一作出解釋。stroke所涉及的屬性，關鍵是活學活用，不要求全部學會、死記住，但建議應學會專用屬性工作表中我用紅色給標記的常用屬性，當然多了我不反對，只要你有腦子裝~
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">
<v:line style="z-index:1;LEFT:256;POSITION:absolute;TOP:232" from="0,0" to="76.5,-17.25" stroked="t" strokecolor="black" strokeweight="3.75">
<v:stroke opacity="1" startarrow="oval" startarrowwidth="wide" startarrowlength="long" endarrow="classic" endarrowwidth="wide" endarrowlength="long"/>
</v:line>
<v:line style="z-index:1;LEFT:249;POSITION:absolute;TOP:151" from="0,0" to="76.5,-17.25" stroked="t" strokecolor="black" strokeweight="3.75">
<v:stroke opacity="1" startarrow="oval" startarrowwidth="narrow" startarrowlength="short" endarrow="classic" endarrowwidth="narrow" endarrowlength="short"/>
</v:line>
<v:line style="z-index:1;LEFT:252;POSITION:absolute;TOP:190" from="0,0" to="76.5,-17.25" stroked="t" strokecolor="black" strokeweight="3.75"> <v:stroke opacity="1" startarrow="oval" startarrowwidth="medium" startarrowlength="medium" endarrow="classic" endarrowwidth="wide" endarrowlength="long"/>
</v:line>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">
<v:curve style="z-index:1;LEFT:249;POSITION:absolute;TOP:144" from="0,0" control1="32.25,-15" control2="24.75,24" to="70.5,0" filled="f" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight=".75">
<v:stroke opacity="1" startarrow="none" startarrowwidth="narrow" startarrowlength="short" endarrow="classic" endarrowwidth="wide" endarrowlength="long"/>
</v:curve>
<v:curve style="z-index:1;LEFT:251;POSITION:absolute;TOP:187" from="0,0" control1="32.25,-15" control2="24.75,24" to="70.5,0" filled="f" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight=".75">
<v:stroke opacity="1" startarrow="none" startarrowwidth="narrow" startarrowlength="short" endarrow="classic" endarrowwidth="wide" endarrowlength="long" dashstyle="dash"/>
</v:curve>
<v:rect style="z-index:1;LEFT:248;WIDTH:69;POSITION:absolute;TOP:222;HEIGHT:51" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight=".75">
<v:stroke opacity="1" dashstyle="dot"/>
</v:rect>
<v:rect style="z-index:1;LEFT:325;WIDTH:69;POSITION:absolute;TOP:223;HEIGHT:51" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight=".75">
<v:stroke opacity="1" dashstyle="dash"/>
</v:rect>
<v:rect style="z-index:1;LEFT:402;WIDTH:69;POSITION:absolute;TOP:223;HEIGHT:51" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight=".75">
<v:stroke opacity="1" dashstyle="longDashDotDot"/>
</v:rect>
<v:oval style="z-index:1;LEFT:244;WIDTH:61;POSITION:absolute;TOP:292;HEIGHT:58" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight="2.25">
<v:stroke opacity="1" dashstyle="shortDashDot"/>
</v:oval>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">
<v:Image style="z-index:1;LEFT:258;WIDTH:100;POSITION:absolute;TOP:136;HEIGHT:100" src="shili/fyw1.jpg" bilevel="f" stroked="t" strokecolor="#e725d6" strokeweight="2.25">
<v:stroke opacity="1" dashstyle="shortDashDot"/>
</v:Image>
<v:roundrect style="z-index:1;LEFT:329;WIDTH:94;POSITION:absolute;TOP:183;HEIGHT:102" arcsize="9830f" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight="22.5">
<v:stroke opacity="0.2"/>
</v:roundrect>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">
<v:oval style="z-index:1;LEFT:136;WIDTH:193;POSITION:absolute;TOP:115;HEIGHT:185" fillcolor="yellow" stroked="t" strokecolor="#e725d6" strokeweight="3.75"> <v:stroke filltype="frame" opacity="1" src="shili/fyw2.jpg"/>
</v:oval>
<v:oval style="z-index:1;LEFT:356;WIDTH:193;POSITION:absolute;TOP:119;HEIGHT:185" fillcolor="yellow" stroked="t" strokecolor="#e725d6" strokeweight="18.75">
<v:stroke filltype="frame" opacity="39321f" src="shili/haha.gif"/>
</v:oval>
<v:rect style="z-index:1;LEFT:593;WIDTH:131;POSITION:absolute;TOP:160;HEIGHT:127" fillcolor="white" stroked="t" strokecolor="black" strokeweight="30"> <v:stroke filltype="frame" opacity=".5" src="shili/fyw1.jpg"/>
</v:rect>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">
<v:rect style="z-index:1;LEFT:262;WIDTH:100;POSITION:absolute;TOP:147;HEIGHT:103" fillcolor="white" stroked="t" strokecolor="green" strokeweight="15"> <v:stroke filltype="pattern" opacity="1" color2="red" src="shili/fyw1.jpg"/>
</v:rect>
<v:rect style="z-index:1;LEFT:400;WIDTH:100;POSITION:absolute;TOP:149;HEIGHT:103" fillcolor="white" stroked="t" strokecolor="white" strokeweight="15"> <v:stroke filltype="pattern" opacity="1" color2="yellow" src="shili/fyw1.jpg" imagesize="1,1"/>
</v:rect>
<v:rect style="z-index:1;LEFT:533;WIDTH:100;POSITION:absolute;TOP:151;HEIGHT:103" fillcolor="white" stroked="t" strokecolor="blue" strokeweight="15"> <v:stroke filltype="pattern" opacity="1" color2="lime" src="shili/fyw1.jpg" imagealignshape="f" imagesize="1,1"/>
</v:rect>
<v:rect style="z-index:1;LEFT:679;WIDTH:100;POSITION:absolute;TOP:150;HEIGHT:103" fillcolor="white" stroked="t" strokecolor="blue" strokeweight="15">
<v:stroke filltype="tile" opacity="1" color2="lime" src="shili/fyw1.jpg" imagealignshape="f" imagesize="1,1"/>
</v:rect>
《VML極道教程》原著:沐緣華
1章19節:shadow陰影
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>
<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:444px;WIDTH:121px;POSITION:absolute;TOP:142px;HEIGHT:101px" fillcolor="white" strokecolor="black" strokeweight=".75pt"> <v:shadow on="t" type="perspective" color="blue" opacity="26214f" matrix="78643f" offset="7.25pt,7.25pt"/>
</v:oval>
<v:oval style="Z-INDEX:2999;LEFT:505px;WIDTH:96px;POSITION:absolute;TOP:203px;HEIGHT:110px" fillcolor="yellow" strokecolor="black" strokeweight=".75pt"/>
<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>
博文來源：http://www.cnblogs.com/GeneralXU/archive/2007/05/29/763241.html
