方法一：html部分写一个div
<div></div>
css 部分：div{
width:200px//给200像素的宽
height:200px//给200像素的高
border:1px solid #000 //给一个边框 颜色为黑色
background:transparent// 给这个盒子一个透明的背景色
}
好了 ，这个是一个非常简单的 矩形盒子，不过通常都是用H5 的canvas来做的
方法二： html代码 ，创建canvas画布
<canvas id="myCanvas">您的浏览器不支持H5 canvas属性</canvas>
然后就是js 部分了
var c=document.getElementById("myCanvas") //获取canvas
var ctx=c.getContext("2d")创建一个2D 对象
ctx.beginPath() //
ctx.lineWidth="6"//线条宽度
ctx.strokeStyle="red"//设置为黑色
ctx.rect(5,5,290,140)//创建矩形，起始点的x y坐标，和矩形宽高
ctx.stroke() //绘制矩形（无填充） [有填充用 ctx.fill（）]
也是可以直接写
var canvas=document.getElementById('myCanvas')
var ctx=canvas.getContext('2d')
ctx.fillStyle='#FF0000'
ctx.fillRect(0,0,80,100) //起始坐标和填充色
方法三：通过绘制路径来画矩形
var c=document.getElementById("myCanvas")
var cxt=c.getContext("2d")
cxt.moveTo(10,10) //起始点
cxt.lineTo(50,10) //结束点 同时也是下一个结束点的起始点
cxt.lineTo(50,50)
cxt.lineTo(10,50)
cxt.lineTo(10,10)
cxt.stroke()
HTML没有实现矩形的标签，可以借助CSS来完成。使用CSS3的border-radius属性，即可完成圆角矩形。border-radius属性的具体用法如下：
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
默认值：0
继承性：no
版本：CSS3
JavaScript 语法：object.style.borderRadius="5px"
语法
border-radius: 1-4 length|% / 1-4 length|%
（注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。）
值 描述 测试
length定义圆角的形状。测试
%以百分比定义圆角的形状。测试
例子 1
border-radius:2em
等价于：
border-top-left-radius:2em
border-top-right-radius:2em
border-bottom-right-radius:2em
border-bottom-left-radius:2em
例子 2
border-radius: 2em 1em 4em / 0.5em 3em
等价于：
border-top-left-radius: 2em 0.5em
border-top-right-radius: 1em 3em
border-bottom-right-radius: 4em 0.5em
border-bottom-left-radius: 1em 3em
canvas问题:
canvas
rect:(x,y,width,height)此处为定义矩形路径
，具体可以当做简便创建矩形来使用。
canvas
strokeRect：（同上），用来创建矩形框；
canvas
fillRect
：（同上），填充一块矩形区域。
