VML是描述的一條線段:
<DIV style="position:relative; top: 0px; left: 0px; width:500px; height:120px">
<?import namespace=v urn="urn:schemas-microsoft-com:vml" implementatiforbidden declareNamespace />
<v:line style="position: absolute; top: 60px; left: 30px" stroked="t" strokecolor="#FF9966" strokeweight="1px" filled="t" fillcolor="RED" to="400 .1">
</v:line>
</DIV>
VML分析:
v: 指定以下是VML語言。
line 這是直線的標籤。
還有Rect(矩形),RoundRect(圓角的矩形),Oval(圓),Arc(弧), PolyLine(不規則折線) 等等。
stroked="t" 有無邊框,t有,f無。
strokecolor 描述線(邊框)的顏色,默認黑色(black)。
strokeweight 邊框厚度,默認為"1px"。
filled="t" 有無背景,t有,f無。
fillcolor 背景顏色(填充色),默認白色(white)。
to="400 .1" 描述線條的另一頭座標,起始點 from="0,0" 沒寫,默認。
以定位點top: 60px; left: 30px;為起點座標0,0.另一頭就是400,.1(兩數間不空格寫逗號也可以,.1是Y座標0.1)
收尾,如無內容時可直接收尾:
實際作中只要改變400大小(線條的長短)就可以了
文字的顏色特效:
<DIV style="position:relative; top: 0px; left: 0px; width:500px; height:120px">
<?import namespace=v urn="urn:schemas-microsoft-com:vml" implementation="#default#VML" declareNamespace />
<v:line style="position: absolute; top: 60px; left: 30px" stroked="t" strokecolor="#FFFF66" strokeweight="1px" filled="t" fillcolor="RED" to="400 .1">
<v:path textpathok="t"/>
<v:textpath style="FONT-SIZE:30;FONT-FAMILY:標楷體" on="t" fitpath="t" string="文字的顏色特效"/>
</v:line>
</DIV>
語法分析:
應用textpath文本路徑,必須增加這個二級標記,它表示生成該圖形文本路徑。
textpath 文本路徑標籤。
on="t" 表示textpath文本路徑處理起作用。
fitpath="t" 表示文字會自動縮放占滿整個路徑。
(CSS所定字體大小在這時無效,如上面的FONT-SIZE:60),fitpath="f"則表示文字不自動縮放占滿整個路徑,CSS定字體大小起作用。
所以這個代碼直接放上去填文字就可以用了,要調節文字大小,只要改變線條的長短就可。
線條的邊框和背景顏色屬性,只要調節"t","f",就可決定它們的有無。
無邊框有背景:stroked="f" filled="t"
有邊框無背景:stroked="t" filled="f" (邊框加厚:strokeweight="2px")
顏色填充:
<DIV style="position:relative; top: 0px; left: 0px; width:500px; height:120px">
<?import namespace=v urn="urn:schemas-microsoft-com:vml" implementation="#default#VML" declareNamespace />
<v:line style="position: absolute; top: 60px; left: 30px" stroked="f" strokecolor="#FFFF66" filled="t" fillcolor="RED" to="400 .1">
<v:path textpathok="t"/>
<v:textpath style="FONT-SIZE:60;FONT-FAMILY:標楷體" on="t" fitpath="t" string="文字的顏色特效"/>
<v:fill type="gradient" method = "none" opacity="1" angle="90" color2="#FFFF00" />
</v:line>
</DIV>
代碼分析:
fill 填充標籤。
type 描述使用哪種填充模式,在這裏只用gradient。
method 描述均勻分佈的對比。
opacity 描述填充透明度,值0.0-1.0,0全透明,1.0全不透明。
angle 描述顏色漸行效果,整體以圓周順時針方向旋轉,顏色發生傾斜,值1-360。
color2 描述基本二級過度顏色。
改變顏色的透明度和角度:opacity=".3" angle="-180"
改變colors的效果:
<DIV style="position:relative; top: 0px; left: 0px; width:500px; height:120px">
<?import namespace=v urn="urn:schemas-microsoft-com:vml" implementation="#default#VML" declareNamespace />
<v:line style="position: absolute; top: 60px; left: 30px" stroked="f" strokecolor="#FFFF66" filled="t" fillcolor="RED" to="400 .1">
<v:path textpathok="t"/>
<v:textpath style="FONT-SIZE:60;FONT-FAMILY:標楷體" on="t" fitpath="t" string="文字的顏色特效"/>
<v:fill type="gradient" method = "none" opacity="1" angle="90" color2="#FFFF00" colors = "0 #a603ab;13763f #0819fb;22938f #1a8d48;34079f yellow;47841f #ee3f17;57672f #e81766;1 #a603ab" />
</v:line>
</DIV>