使用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