【转载】使用VML技术实现圆角表格的绘制

最新推荐文章于 2023-07-31 14:55:51 发布

hitzqb

最新推荐文章于 2023-07-31 14:55:51 发布

阅读量1k

点赞数

分类专栏： 2006年11月文章标签： textbox behavior 图形 html ie 微软

本文链接：https://blog.csdn.net/hitzqb/article/details/1376233

版权

2006年11月专栏收录该内容

38 篇文章 0 订阅

订阅专栏

前两天论坛看到有人问关于圆角表格的制作，这已经是老生常谈了，CSS、图片都可以，其实如果只是 IE 浏览有更好的方法，就是 VML，中午有空，把东西整理了一下。

引用

首发 http://blog.eliuzd.com/ 网络转载请保留出处，传统媒体与本站联系。

先看效果图：

代码：

<html xmlns:v="urn:schemas-microsoft-com:vml">

<head>
<style>
v/:* {behavior: url(#default#VML);}
</style>
</head>

<body>
<v:RoundRect style="width:200;height:100px">
<v:shadow on="true" type="single" color="#b3b3b3" offset="5px,5px"/>
<v:textbox style="font-size:12px">

<div>圆角表格显示效果<br /><br /><a href="http://blog.eliuzd.com/">http://blog.eliuzd.com/</a></div>

</v:textbox>
</v:RoundRect>
</body>

</html>

实现代码很简单，主要就是用到了微软的VML技术（代码里的 xmlns:v 相关部分）：

首先我们解释以下什么是VML？

VML的全称是Vector Markup Language（ 矢量可标记语言）
VML可以理解为是IE里面的画笔工具，可以通过它来实现你所想要画出的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月随 IE5.0 一起发布的，也就是说，在 IE5.0+ 里都支持。

在VML里面，使用的是XML扩展标记，需要一个namespace（命名空间），在上面的程序里就是那个“v”

<html xmlns:v="urn:schemas-microsoft-com:vml">

<head>
<style>
v/:* {behavior: url(#default#VML);}
</style>
</head>

这部分代码其实就是把命名空间“v”和系统预定义的行为VML连接。这样定义以后，我们就可以使用下面的标记了，和普通的HTML标记有所区别，每个标记都增加了一个命名空间:

如：<v:shape></v:shape>

“v” 是我们定义的VML，“:” 后面就是VML的对象（shape 是VML最基本的对象，利用它可以画出所有你想要的图形），每个VML对象都有许多属性，这些大家可以查 VML教程细看，我这里不多说了。

我们看前面的代码：

<body>
<v:RoundRect style="width:200;height:100px">
<v:shadow on="true" type="single" color="#b3b3b3" offset="5px,5px"/>
<v:textbox style="font-size:12px">

<div>圆角表格显示效果<br /><br /><a href="http://blog.eliuzd.com/">http://blog.eliuzd.com/</a></div>

</v:textbox>
</v:RoundRect>
</body>

body 中的内容就是在使用VML对象画图了。

RoundRect：从名字就可以看出，是画个圆角矩形
style=" width:200;height:100px" 设置矩形的长宽

shadow：阴影

textbox：内容
style=" font-size:12px" 就是设置字体大小，它还有个属性是 print （true/false）是否被打印机打印。

VML 对象除了自己的属性外，基本支持CSS2样式表的所有样式属性。

我这里只是对就圆角表格对 VML 技术中相关的几个对象做了点介绍，如果有兴趣可以自己查阅相关资料。

但需要注意的是，由于这是微软的技术，除了 IE 之外目前许多浏览器都不支持，比如 Firefox，浏览上面的代码就看不到表格。