📄 step4.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Thinking in VML</title>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css" />
<body>
<table align="center">
<tr>
<td align="center" class="title"><strong>Rect,RoundRect(矩形)对象</strong></td>
</tr>
<tr>
<td >
<div class="memo" style="width:700;line-height:23px">
用VML画矩形，必须设置 style="width:50;height:50"，其他就没有什么特别的。在这节，顺便讲讲 shadow 对象和 TextBox对象：<br>
<v:Rect style="position:relative;<font color=red>width:100;height:50px</font>"/><br>
<center><v:Rect style="position:relative;width:100;height:50px"/></center>
RoundRect顾名思义，是圆角的矩形，这种形状在画流程图的时候很常用，如果加上阴影，就更好看了：<br>
<v:RoundRect style="position:relative;width:100;height:50px"><br>
<v:shadow <font color=red>on="T" type="single" color="#b3b3b3" offset="5px,5px"</font>/><br>
</v:RoundRect>
<center><v:RoundRect style="position:relative;width:100;height:50px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
</v:RoundRect></center><br>
在VML里面，True 和 False 可以简写成 T 和 F。Shadow 中的 offset 属性用来设置 偏移原图的 x,y 值。 on 属性用来决定是否显示阴影。在矩形中写字，
要用到 TextBox 对象。TextBox 比较关键的属性是 inset(left,top,right,bottom)，意思是隔图形边的上下左右多少范围内定位文字：<br>
<v:RoundRect style="position:relative;width:120;height:50px"><br>
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/><br>
<v:TextBox <font color=red>inset="5pt,5pt,5pt,5pt"</font> style="font-size:10.2pt;">Hello world!</v:TextBox><br>
</v:RoundRect>
<center><v:RoundRect style="position:relative;width:120;height:50px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
<v:TextBox inset="2pt,5pt,2pt,5pt" style="font-size:10.2pt;">Hello world!</v:TextBox>
</v:RoundRect></center><br>
当然你也可以直接插入HTML代码，比如说插入一个<br><Div style="padding-top:5px;padding-left:5px;padding-right:5px;padding-bottom:5px">Hello World!</Div><br>效果是一样的。
</div>
</td>
</tr>
<tr>
<td class="title">
<p align="right"><a href="javascript:self.scrollTo(0,0)">Top</a></p>
<a href="index.html">返回目录</a><br>
上一节:<a href="step3.html">Line,Polyline(线)对象</a><br>
下一节:<a href="step5.html">Oval(圆)对象</a>
</td>
</tr>
</table>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -