Rect,RoundRect(矩形)对象（四）

最新推荐文章于 2023-12-21 01:45:09 发布

kagad

最新推荐文章于 2023-12-21 01:45:09 发布

阅读量1k

点赞数

分类专栏：矢量作图文章标签： textbox 图形 html div

矢量作图专栏收录该内容

12 篇文章 0 订阅

订阅专栏

用VML画矩形，必须设置 style="width:50;height:50"，其他就没有什么特别的。在这节，顺便讲讲 shadow 对象和 TextBox对象：
    <v:Rect style="position:relative; width:100;height:50px"/>
    RoundRect顾名思义，是圆角的矩形，这种形状在画流程图的时候很常用，如果加上阴影，就更好看了：
    <v:RoundRect style="position:relative;width:100;height:50px">
    <v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
    </v:RoundRect>
    在VML里面，True 和 False 可以简写成 T 和 F。Shadow 中的 offset 属性用来设置偏移原图的 x,y 值。 on 属性用来决定是否显示阴影。在矩形中写字，要用到 TextBox 对象。TextBox 比较关键的属性是 inset(left,top,right,bottom)，意思是隔图形边的上下左右多少范围内定位文字：
    <v:RoundRect style="position:relative;width:120;height:50px">
    <v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
    <v:TextBox inset="5pt,5pt,5pt,5pt" style="font-size:10.2pt;">Hello world!</v:TextBox>
    </v:RoundRect> Hello world!
    当然你也可以直接插入HTML代码，比如说插入一个
<Div style="padding-top:5px;padding-left:5px;padding-right:5px;padding-bottom:5px">Hello World!</Div>
效果是一样的。