HTML创建几个边框,使用HTML5创建多个边框

您使用的有据可查的HTML5画布背景API线条和矩形构建它。

context.fillStyle，context.strokeStyle，context.fillRect，context.strokeRect，context.beginPath，context.moveTo，context.lineTo

var canvas = document.getElementById("c");

var ctx = canvas.getContext("2d");

ctx.lineWidth = 2;

//

ctx.strokeStyle = "#000";

ctx.beginPath()

ctx.moveTo(100, 0);

ctx.lineTo(100, 100);

ctx.lineTo(0, 100);

ctx.stroke();

//

ctx.strokeStyle = "#aaa";

ctx.beginPath()

ctx.moveTo(90, 10);

ctx.lineTo(10, 10);

ctx.lineTo(10, 90);

ctx.moveTo(85, 15);

ctx.lineTo(15, 15);

ctx.lineTo(15, 85);

ctx.stroke();

//

ctx.strokeStyle = "#777";

ctx.fillStyle = "#aaa";

ctx.fillRect(20, 20, 60, 60);

ctx.beginPath()

ctx.moveTo(80, 20);

ctx.lineTo(20, 20);

ctx.lineTo(20, 80);

ctx.stroke();