为什么没有边框式：双;呈现？

Question

我有h1我已经定义了以下样式：

h1
  { text-align: center;
    border: double black 1px;
    padding: 1em;
    margin: 1em;
}

这是一个JSfiddle：http://jsfiddle.net/KatieK/Hs3ZQ/

我将border-style设置为double，但我只看到一个渲染的边框。为什么不是双边框渲染？

Answer 1

double显示两条直线，这些直线加起来定义为border-width（source）的像素数量。

您需要使用至少3px。

h1
  { text-align: center;
    border: double black 3px;
    padding: 1em;
    margin: 1em;
}

http://jsfiddle.net/Hs3ZQ/6/

Answer 2

1px太薄而无法呈现双边框，您必须使边框更粗。

h1
  { text-align: center;
    border: double black 3px;
    padding: 1em;
    margin: 1em;
}

http://jsfiddle.net/Hs3ZQ/3/

Answer 3

对于双边框，您需要将边框宽度设置为至少3px到see the effect。

Answer 4

从CSS中删除1px将有效......

h1
  { text-align: center;
    border: double black;
    padding: 1em;
    margin: 1em;
}

请参阅更新的小提琴：http://jsfiddle.net/Hs3ZQ/5/