3

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

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

这是从这个问题开始的：Border-box CSS not working proper

4

2 回答 2

2

如果您不介意它在旧版浏览器中不起作用，您可以使用 .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);
于 2012-09-08T05:47:20.200 回答
1

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

示例：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 中也未对齐）。

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

于 2012-09-08T05:52:30.540 回答