来源:自学PHP网 时间:2018-02-09 10:05 作者: 阅读:次
[导读] 本系列文章导航VML极道教程(一) VML介绍 VML极道教程(二) VML入门VML极道教程(三) 标记实战与line线VML极道教程(四) oval圆rect矩型VML极道教程(五) RoundRect圆矩型VML极道教程(六) image图片VML极道...
RoundRect圆矩型
1:RoundRect圆矩型 - 专用属性
arcsize 用于描述圆矩形四角的弧度值,0-0.5,默认值0.05 2:RoundRect圆矩型 - 实例讲解 <HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:roundrect style="POSITION:absolute;Z-INDEX:1;LEFT:100;WIDTH:100;TOP:100;HEIGHT:100" strokecolor="black" strokeweight="1px"/> <v:roundrect style="POSITION:absolute;Z-INDEX:1;LEFT:220;WIDTH:100;TOP:100;HEIGHT:100" strokecolor="red" strokeweight="1px" arcsize="0.15"/> <v:roundrect style="POSITION:absolute;Z-INDEX:1;LEFT:340;WIDTH:250;TOP:120;HEIGHT:200" strokecolor="green" strokeweight="1px" arcsize="0.3" fillcolor="yellow"/> 不难看出,roundrect圆矩形与oval圆、rect矩形的标记很类似,只是多了一个arcsize专用属性。该专用属性就是控制圆矩形四角弧度的,值越小弧度越小、值越大弧度越大 3:RoundRect圆矩型 - 小试牛刀 <HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:roundrect style="POSITION:absolute;Z-INDEX:1;LEFT:100;WIDTH:70;TOP:100;HEIGHT:30;text-align:center;padding-top:8" strokecolor="black" strokeweight="1px" arcsize="0.2" href="http://www.microsoft.com" title="单击访问微软网站" target="window1"> 微软 </v:roundrect> <v:roundrect style="POSITION:absolute;Z-INDEX:1;LEFT:170;WIDTH:70;TOP:100;HEIGHT:30;text-align:center;padding-top:8" strokecolor="black" strokeweight="1px" arcsize="0.2" href="http://www.google.com" title="单击访问google网站" target="window1"> </v:roundrect> <v:roundrect style="POSITION:absolute;Z-INDEX:5;LEFT:80;WIDTH:400;TOP:126;HEIGHT:250;text-align:center;padding-top:12" strokecolor="black" strokeweight="1px" arcsize="0.06"> <iframe src="" name="window1" width=95% height=95%></iframe> </v:roundrect> 本例综合本章节及本章节以前的知识,做了一个小范例,该简单的范例主要演示VML 3D WEB页面的制作、以及如何用CSS控制图形HTML内容的排版(text-align:center;描述内容左右居中、padding-top:8;描述内容距离图形上方内边界8个像素) 博文来源:http://www.cnblogs.com/GeneralXU/archive/2007/05/29/763226.html |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com