Question

我试图给#page div一个内边框，该边框与顶部周围的灰色边框一致：http://www.designated.net.au/testbed/testpage/

我意识到我可以添加另一个div，但这不是我正在寻找的解决方案，因为#page中会有其他内容。这可能吗？

以下是这个问题：Border-box CSS not working properly

Answer 1

如果您不介意它不能在旧浏览器中使用，您可以使用.box-shadow。这可以在不添加额外标记的情况下完成。您也可以使用：before或：after伪css类，但box-shadow是更清晰的IMO。

-webkit-box-shadow(inset 0 0 1px #000);
   -moz-box-shadow(inset 0 0 1px #000);
     -o-box-shadow(inset 0 0 1px #000);
        box-shadow(inset 0 0 1px #000);

Answer 2

您可以利用已经使用的相对定位将图像与边框对齐。

示例：http://jsfiddle.net/zbrcb/

将这些定义与现有定义合并。

#page {
 border: 10px solid #333;  
}

#spotlight-main-top-left { z-index:3; position:relative; float:left; width:40px; height:40px; left: -10px; top: -10px; }
#spotlight-main-top-top { z-index:2; position:relative; width:100%; height:10px; background-color:#333333; top: -10px; }
#spotlight-main-top-right { z-index:3; position:relative; float:right; width:40px; height:40px; right: -10px; top: -10px; }
#spotlight-main-top-title { z-index:3; position:relative; margin:0 auto; width:200px; height:30px; top: -10px;  }
#spotlight-main-top-title-left { position:relative; float:left; width:30px; height:30px; }
#spotlight-main-top-title-right { position:relative; float:right; width:30px; height:30px; }
#spotlight-main-top-title-middle { position:relative; margin:0 30px 10px; width:140px; height:20px; background-color:#333333; }
#spotlight-main-top-title-text { position:relative; width:140px; height:18px; text-align:center; }

适用于Chrome，FF，Safari，IE 8/9（也许可以使用7个版本;即使没有此更改，您的标题在IE7中也会失调）。

就个人而言，我会尝试减少您用来创建网站顶部的元素数量，但公平地说它可以正常工作。

我怎样才能给这个CSS一个内边框？

2 个答案: