如何在画布周围添加边框？

Question

我想知道如何在画布周围添加边框。只需使用CSS代码即可实现。

border:black 3px solid;

你在画布中得到了边框，但我不想要画布内的边框。我希望边框围绕着画布。我想用CSS实现这个效果。

感谢你的帮助！

我的CSS代码：

#my_canvas {
    max-width: 98%;
    max-height: 98%;
    height: auto;
    width: auto;
    margin:auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color:white;
    border:black 3px solid;
}
#center {
    max-width: 66.5%;
    max-height: 95%;
    height: auto;
    width: auto;
    margin:auto;
    background:;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
Body {
    background-color: slategrey;
}

- Thomas

---

你确定吗？http://jsfiddle.net/swfour/r3ka2sj4/ - SW4

我无法在Chrome中复制这个。边框肯定在canvas元素的外部。你有没有偶然设置box-sizing为border-box？ - James Donnelly

如果你使用这个东西 --> nth-of-type(1)，它就能正常工作了！谢谢。 - Thomas

@Thomas 所做的只是选择他们想要的画布，没有更多操作。您的代码不需要它也可以运行。您的代码正常工作... 另外，使用Chrome浏览器也可以正常工作。 - Ruddy

哎呀，但如果没有它，对我来说就不起作用...我使用Chrome。 - Thomas

Answer 1

outline: black 3px solid;

Outline会在元素外绘制一条线。

- Michelangelo

Answer 2

可以这样建议：

<canvas id="canvas"></canvas>
  #canvas{
border:2px solid black !important;}

- stranger4js

---

这是怎么工作的？这是HTML代码吗？对我来说，它只是将 #canvas{border:2px solid black !important;} 打印为文本... - Cadoiz

Answer 3

这可能是由于画布继承了box-sizing: border-box;引起的。

尝试将box-sizing: padding-box;应用于画布CSS。

- BurpmanJunior

---

我提供了我的CSS代码，我需要box-sizing和padding-box吗？ - Thomas

@Thomas 你需要在 #my_canvas 中添加 box-sizing: padding-box;，但前提是问题是由其他地方的杂散的 box-sizing 属性引起的。 - BurpmanJunior