利用XML+CSS简单达到圆角表格效果的方法
XML/HTML代码
<html xmlns:v>
<head>
<style>
v:* {behavior: url(#default#VML);}
</style>
</head>
<body>
<v:RoundRect style="position:relative;width:200;height:100px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
<v:textbox style="font-size:12px">css实现真正的圆角表格</v:textbox>
</v:RoundRect>
</body>
</html>
关于VML:
全称是Vector Markup Language(矢量可标记语言),VML相当于IE里面的画笔,能实现你所想要的图形,而且结合脚本,可以让图形产生动态的效果。xmlns 全称就是XML NameSpace 也就是命名空间。在VML里面,标记使用的是XML扩张,需要一个namespace(命名空间),你可以使用惯用的“v”作为命名空间。
1、代码中的v:RoundRect其实就是命名外框(空间)为“圆边的矩形”(RoundRect Rect),其他的还有:Rect(矩形),RoundRect(圆边的矩形),Oval(圆),Line(线),PolyLine(不规则折线),Image(图形文件)等等,以后将对这些对象细细描述。
2、v:shadowshadow对象命名的是阴影,offset是阴影的偏移量,后面的参数就是调整阴影的偏移。
3、v:textbox textbox对象比较关键的属性是inset(left,top,right,bottom),意思是隔图形边的上下左右多少范围内定位文字,在CSS上相当于内间距。