使用HTML5创建多个边框

Question

我正在尝试在html5中重新创建以下内容。我知道如何创建矩形，但我不知道如何让它们在中间有一个洞。

Answer 1

使用记录良好的html5画布上下文api，使用直线和矩形构建它。

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

http://jsfiddle.net/DG7km/

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();

Answer 2

如果你想用纯CSS / HTML（没有画布）创建它，你可以使用框阴影和边框这样做

.container {
    width:250px;
    height:300px;
    border-right:3px solid black;
    border-bottom:3px solid black;
    padding:35px;
}
.content {
    border-top:2px solid grey;
    border-left:2px solid grey;
    height:250px;
    width:200px;
    box-shadow:
       10px  10px 0 15px white,
       5px  5px 0 15px hsl(0, 0%, 80%),
       12px  12px 0 25px white,
       7px  7px 0 25px hsl(0, 0%, 80%);
}

Demo here