Html 使用两个div的双边框_Html_Css

Html 使用两个div的双边框

html css

Html 使用两个div的双边框,html,css,Html,Css,我想做一个深蓝色的盒子，里面有白色的边框，外面有蓝色的边框。白色边框的div位于蓝色边框的div中。但我得到的只是一个大的深蓝色盒子 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Practice 2014-4-22-01</title> <style> #bannerDiv { border: 2 px sol

我想做一个深蓝色的盒子，里面有白色的边框，外面有蓝色的边框。白色边框的div位于蓝色边框的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>


实践2014-4-22-01
#班纳迪夫{
边框：2像素纯白；
背景色：深蓝色；
颜色：白色；
}
#外层{
边框：2像素纯蓝；
}
没有双重边界：(

输出：

你可以在这里看到：。

不要在单位前加空格（

px

）。

不要在数字和测量值之间加空格：

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

这也适用于%1：

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

由于

2 px

之间有空格，请参见此处：
此外，您还可以使用css，不需要额外的div来删除空间

#outerDiv {
    border: 2px solid blue;
}

您的css拼写错误应为：

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

无需使用两个div，您可以使用和

边距来伪造第二个边框

：

HTML:

类似地，也可以使用

大纲

代替

框阴影

：

border: 2px solid white;    /* Inner border */
outline: 2px solid blue;    /* Outer border */
margin: 2px;                /* Same as outer border width */

哇，我觉得自己像个白痴。谢谢大家。老兄，这件事的答案将是铺天盖地的…+1我自己花了太长时间才意识到这一点。我坐在这里来回穿梭于

内联和内联块之间，想着有什么奇怪的把戏我不知道……我真想为自己的无知而哭泣盒子模型的。很高兴知道我只是在编程上一筹莫展。这个答案已经发布了4次了，老兄。你为什么再次发布它？对不起，你一定是在我打字的时候发布的。别难过。我宁愿有太多的人回答问题，而不是太少。谢谢你的建议。
border: 2px solid white;    /* Inner border */
outline: 2px solid blue;    /* Outer border */
margin: 2px;                /* Same as outer border width */