方法一：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()
PrintWriter out =response.getWriter()out.println("<script language='javascript'>alert('')</script>")
画框怎么画如下：
第一种方法
首先我们用线条画出蝴蝶结
然后用波浪线描绘出画框的里框
接下来用矩形画出画框的外边框
最后我们涂上漂亮的颜色，我们的画框就完成拉！
第二种方法在PS里画
点击【图框工具】，然后用【矩形画框】画出一个长方形图框。
拖入一张图片放入图框里面（它会随着图框的大小，自动裁剪图片）。
双击【画框缩览图】打开属性面板（现在看到描边默认为无）。
把描边位置为【外部】，描边大小设置为【86.55】像素，然后选择自己喜欢的描边颜色。
用【椭圆画框】画出一个圆形图框，然后拖入一张图片，它就会变成圆形的效果了。
把描边设置为渐变颜色，描边位置为【居中】，描边大小设置为【102.93】像素。
看到长方形图片添加上了纯色的描边，圆形图片添加了渐变色的描边效果。
第三种方法用PPT画
点击插入——形状——选择图文框——插入一个图文框。
选择图文框——点击格式——形状填充——纹理——选择沙滩样式。
点击格式——选择形状轮廓——选择无轮廓。
也可以先下载一些花纹图片——点击格式——形状填充——图片——选择下载的花纹图片进行填充。
接着点击格式的形状轮廓——选择紫色——虚线选择圆点虚线。
也可以插入——形状——选择立方体——然后按上述方法选择图片进行填充。
