VML實現圓角的例子

 

<html xmlns:v>
<head>
<style>
v/:* {behavior: url(#default#VML);}
</style>
</head>
<body>
<v:RoundRect style="position:fixed; left:0px; top:0px; width:100%; height:150px;" FillColor="#eeeeee" Filled="T" strokeColor="#000000">
<v:textbox>
  <table width="98%" height="50" border="1" cellspacing="0" cellpadding="0" align="right">
    <tr>
      <td align="center">哈哈哈哈</td>
    </tr>
  </table>
</v:textbox>
</v:RoundRect>
</body>
</html>

 

    VML相當於IE裏面的畫筆,能實現你所想要的圖形,而且結合腳本,可以讓圖形產生動態的效果。VML是微軟1999年9月附帶IE5.0發佈的,在我認爲, VML其實是Word和HTML結合的產物。可以將Word文檔另存爲HTML,其中的文本和圖片可以很容易的轉換,但如果是手繪製的圖形在以往的IE裏面就無法解釋了,如果都轉換成圖形文件又不太現實。於是微軟把Word裏面的圖形控件結合到IE裏面,使IE也具備了繪圖功能。
    VML的全稱是Vector Markup Language(矢量可標記語言),矢量的圖形,意味着圖形可以任意放大縮小而不損失圖形的質量,這在製作地圖上有很大用途。

    在VML裏面,標記使用的是XML擴張,需要一個namespace(命名空間),你可以使用慣用的“v”作爲命名空間,使用IE5.0到IE6.0通用的定義如下:

<html xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE>
v/:* { Behavior: url(#default#VML) }
</STYLE>

    xmlns 全稱就是XML NameSpace 也就是命名空間。Behavior(行爲)也是IE5.0新推出的東西,它的功能非常強大,結合樣式表,可以給任何HTML對象增加行爲(新的屬性、方法、事件),而在這裏,它的用處是把命名空間“v”和系統預定義的行爲VML連接。這樣定義以後,你就可以使用下面的標記了,和普通的HTML標記有所區別,每個標記都增加了一個命名空間:

<v:shape></v:shape>

    和其他HTML元素一樣,VML標記裏面可以定義DHTML大部分屬性和事件,比如說id,name,title,onmouseover等等。在寫法上VML比較靈活,很多屬性既可以寫在標記裏面,又可以獨立出一個新的標記來表示:

<v:shape id=shape1 name=shape1 οnmοuseοver="alert(this.id)" StrokeColor=red Path="m 0,0 l 10,10 x e"></v:shape>
等同於下面的寫法:
<v:shape id=shape1 name=shape1 οnmοuseοver="alert(this.id)">
<v:Stroke StrokeColor=red/>
<v:Path v="m 0,0 l 10,10 x e"/>
</v:shape>

    當然不是所有的屬性都可以寫成獨立的標記,常用的比如說上面的 Stroke(按我的理解可以翻譯成線性),Path,Shadow,Fill(填充)等,VML這樣的方式可以理解爲 shape 的屬性分類,使屬性更直觀。
    Shape 對象派生出來的一些對象,更加直接的圖象,比如說 Rect(矩形),RoundRect(圓邊的矩形),Oval(圓),Line(線),PolyLine(不規則折線),Image(圖形文件)等等,以後將對這些對象細細描述。

發佈了42 篇原創文章 · 獲贊 9 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章