固定位置元素周围需要多个边框

Question

我有一张白色背景的便签 header。页面背景也是白色的。当用户向下滚动页面时，我想从内容中设置 header，所以我给 header 一些填充和 1 像素的浅灰色底部边框。但我想在灰色下方留出 10px 左右的白色条带，这样内容看起来就不会被截断。查看 firebug 布局选项卡中的框模型表明定义 10px 底部边距对我来说可以，但这没有效果。（我正在我的本地机器上使用免费的 Catch Evolution wordpress 主题进行开发，到目前为止，我已经在 Chrome 和 Firefox 38 中查看了我的结果。两者之间的边界问题没有区别。）

我读到关于 :before 和 :after 的多重边框 here 但我认为这对我没有帮助，因为我使用的是固定位置。

Answer 1

改用两个 div。（记得设置第一个的height）

<div style="position: fixed;">
  <div id="content" style="height: 90%; position: relative; border-bottom: 1px solid gray;">
    Your header
  </div>
</div>

固定位置元素周围需要多个边框

need multiple border around fixed position element

css

border

sticky