VML实现圆角的例子

原创 2007年09月17日 10:27:00

 

<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 onmouseover="alert(this.id)" StrokeColor=red Path="m 0,0 l 10,10 x e"></v:shape>
等同于下面的写法:
<v:shape id=shape1 name=shape1 onmouseover="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(图形文件)等等,以后将对这些对象细细描述。

版权声明:本文为博主原创文章,未经博主允许不得转载。

vml实现圆角表格

  • 2008年04月26日 20:54
  • 300B
  • 下载

VML入门到精通(例子)

  • 2014年03月26日 17:47
  • 61KB
  • 下载

基于VML与HTML5 Canva实现的跨浏览器饼图与折线图

一个简单的JS图表库演示源代码,因为太懒,没毅力,源码给有缘者得之或者有用吧! 1. 支持IE6+以上版本,支持Chrome, 支持FireFox 2. 动画加载机制 3. tooltip支持 4. ...
  • jia20003
  • jia20003
  • 2013年09月16日 21:14
  • 10245

svg中text换行,vml里面textbox实现换行

svg中text换行: 可以在text中加入tspan元素 例如: 啊啊啊啊啊啊啊 啊啊啊啊啊啊啊 啊啊啊啊啊啊啊 显示: js实现代码: var _ = this.getTextPositi...

SVG/VML+JS实现跨浏览器的解决方案

Web中实现矢量图形的方法不在乎两种SVG和VML。可升级矢量图像( SVG, Scalable Vector Graphics)和VML (Vector Markup Language)的产生有...
  • eryuee
  • eryuee
  • 2012年04月20日 16:50
  • 517

用VML语言在html中画图和实现动画

效果图如下: String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.ge...

按钮圆角例子

  • 2012年06月04日 22:42
  • 41KB
  • 下载

jquery 圆角例子

  • 2011年03月31日 16:31
  • 59KB
  • 下载

带箭头圆角的 uiview 代码例子

#import #import #define ORC_RADIUS 12@interface MapTipView : UIView {    CGPoint origin;    CGPoint ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:VML实现圆角的例子
举报原因:
原因补充:

(最多只允许输入30个字)