Question

我试图制作一个带有内部白色边框和外部蓝色边框的深蓝色框。白边的div位于蓝色边界内。但我得到的只是一个大蓝盒子。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Practice 2014-4-22-01</title>
<style>
#bannerDiv {
    border: 2 px solid white;
    background-color: darkblue;
    color: white;
}
#outerDiv {
    border: 2 px solid blue;
}
</style>
</head>
<body>
<div id="outerDiv">
    <div id="bannerDiv">No double border :(</div>
</div>
</body>
</html>

输出： enter image description here

您可以在此处查看：JSFiddle。

Answer 1

不要在单位（px）之前放置空格。

Answer 2

无需使用两个div，您可以使用box-shadow和margin伪造第二个边框：

HTML：

<div id="bannerDiv">Double border</div>

CSS：

#bannerDiv {
    border: 2px solid white;    /* Inner border */
    box-shadow: 0 0 0 2px blue; /* Outer border */
    margin: 2px;                /* Same as outer border width */
    background-color: darkblue;
    color: white;
}

同样，box-shadow代替outline，也可以使用border: 2px solid white; /* Inner border */ outline: 2px solid blue; /* Outer border */ margin: 2px; /* Same as outer border width */：

{{1}}

Demo

Answer 3

不要在数字和测量之间留出空格：

2 px /*Invalid*/
2px /*Valid*/

这同样适用于％：

2 % /*Invalid*/
2% /*Valid*/

JSFiddle

Answer 4

因为2 px之间有空格，请看这里：http://jsfiddle.net/jalbertbowdenii/9TtwB/2/
另外，你可以用css做，不需要额外的div

Answer 5

删除空格

#outerDiv {
    border: 2px solid blue;
}

Answer 6

你的css拼写错误应该是：

border: 2px solid green;
border: 2px solid white;

双边框使用两个div

6 个答案:

JSFiddle