使用 HTML5 创建多个边框 [关闭]答案

【问题标题】：Create multiple borders using HTML5 [closed]使用 HTML5 创建多个边框 [关闭]
【发布时间】：2013-11-21 15:36:05
【问题描述】：

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

【问题讨论】：

假设从标签应该在画布上绘制。你已经尝试过什么了吗？
context.clearRect 为我工作

【解决方案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();

【讨论】：

【解决方案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

【讨论】：