创建网页主体边框 | CSS-Tricks

本文最初发布于 2008年2月25日，但现已完全重写，内容更加全面，并展示了现代技术。

我在 Jon Hick 的网站 Hicksdesign 上第一次看到了“主体边框”的概念。在这种情况下，它是一种非常微妙且美观的特效。

主体边框的特征

环绕整个浏览器窗口，无论屏幕尺寸如何，都粘附在边缘
页面滚动时，所有边框都保持原位
页面滚动时，内容位于边框下方

查看演示

方法 1：四个 div

实现此效果并具有最广泛的跨浏览器兼容性的方法是使用四个元素。Hicksdesign 就是这样做的，它使用了四个<b>元素，并在 HTML 注释中写道

我使用 b 标签边框是因为它只是视觉效果，没有实际意义，所以我也可以使用我能找到的最小标签。

无论如何，这都是表现层标记，并不理想。我们将在这里使用一个 div

<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>

然后我们使用 CSS 进行样式设置。一些属性由所有元素共享，一些仅由顶部/底部和左侧/右侧共享，一些则独一无二。以下是一种干净的编码方式，避免不必要的重复属性。

#top, #bottom, #left, #right {
	background: #a5ebff;
	position: fixed;
	}
	#left, #right {
		top: 0; bottom: 0;
		width: 15px;
		}
		#left { left: 0; }
		#right { right: 0; }
		
	#top, #bottom {
		left: 0; right: 0;
		height: 15px;
		}
		#top { top: 0; }
		#bottom { bottom: 0; }

这在 IE 7 及更高版本以及几乎所有其他良好的桌面浏览器中都应该可以正常工作。对于不支持固定定位的 IE 6，我们将使用头部中的条件注释将其删除（没有害处也没有好处）

<!--[if lte IE 6]>
	<style>#top, #bottom, #left, #right { display: none; }</style>
<![endif]-->

我们还应该在小屏幕（可能是移动设备）上将其删除，这些屏幕也不处理固定定位

@media 

/* Fairly small screens including iphones */
only screen and (max-width: 500px),

/* iPads */
only screen and (min-device-width: 768px) and (max-device-width: 1024px) 

{
	#top, #bottom, #left, #right { display: none; }
}

因此，现在我们可以在我们想要的地方获得效果，而不是在不想要的地方获得效果

方法 2：伪元素

在上面的示例中，我们需要四个唯一的元素来完成这项工作。但这比我们文档中语义上合适的元素多四个。理想情况下，我们应该使用零个。好吧，你可能知道，有两个元素的大小已经与浏览器窗口相同，即<html>和<body>元素。在这些元素上使用 :before 和 :after 伪元素，我们就得到了四个！

我们将使用与上面相同的属性和值，只是我们将使用

html:before, html:after, body:before, body:after {
    content: "";
    position: fixed;
    background: #a5ebff;

    /* etc. */
}

Harry Roberts 也提出了这个想法，并在 CSS Wizardy 上发布了它。

虽然伪元素的浏览器支持非常好，但不如方法 1 好。更大的问题是存在一个 WebKit 错误，即 html 元素伪元素上的背景会溢出到整个视口中。这使得暂时无法在 html 元素上使用伪元素。

但有一个解决方案！同时保持语义！

我们实际上不需要四个唯一的元素，我们只需要两个。顶部和底部需要是唯一的，这样它们才能具有固定位置并且不会滚动。对于左侧和右侧，我们实际上只需在<body>上使用一个border。

body:before, body:after {
    content: "";
    position: fixed;
    background: #900;
    left: 0;
    right: 0;
    height: 10px;
}
body:before {
    top: 0;
}
body:after {
    bottom: 0;
}
body {
    border-left: 10px solid #900;
    border-right: 10px solid #900;  
}

相同的效果，浏览器支持略少，语义性更强。

查看演示

趣味：Kottke.org 网页主体边框

Jason Kottke 的 Kottke.org 有一个非常酷的网页主体边框效果。

它使用八个不同的元素和八个不同的图像 (!) 来实现这一点。因为这种边框样式不会固定在视口的顶部和底部（只是内容的顶部和底部），所以使用 CSS3 实际上很容易实现。

我们将对<body>元素使用box-shadow，以及它逗号分隔多个阴影的巧妙功能。以下是它的全部内容，以及

body {
	padding: 40px;
	overflow-x: hidden; /* For Opera */
	-webkit-box-shadow:
		inset #19d4ff 0 0 0 5px,
		inset #18cdf7 0 0 0 1px,
		inset #53dfff 0 0 0 10px,
		inset #50d8f7 0 0 0 11px,
		inset #8ce9ff 0 0 0 16px,
		inset #88e2f7 0 0 0 17px,
		inset #c5f4ff 0 0 0 22px,
		inset #bfecf7 0 0 0 23px;
	-moz-box-shadow:
		inset #19d4ff 0 0 0 5px,
		inset #18cdf7 0 0 0 1px,
		inset #53dfff 0 0 0 10px,
		inset #50d8f7 0 0 0 11px,
		inset #8ce9ff 0 0 0 16px,
		inset #88e2f7 0 0 0 17px,
		inset #c5f4ff 0 0 0 22px,
		inset #bfecf7 0 0 0 23px;
	box-shadow:
		inset #19d4ff 0 0 0 5px,
		inset #18cdf7 0 0 0 1px,
		inset #53dfff 0 0 0 10px,
		inset #50d8f7 0 0 0 11px,
		inset #8ce9ff 0 0 0 16px,
		inset #88e2f7 0 0 0 17px,
		inset #c5f4ff 0 0 0 22px,
		inset #bfecf7 0 0 0 23px;
}

错误提示：Opera（Mac，11.10）存在一个奇怪的错误，它会扩展元素的大小以适应外部的阴影（即使阴影是内嵌的）。由于我们将其用于全宽的 body 元素，因此这会触发不需要的滚动条。可以通过隐藏 overflow-x 来隐藏水平滚动条。但不幸的是，屏幕底部仍然会有一点空间。

虽然这在所有涵盖的内容中浏览器支持最少，但还不错：IE 9+、Fx 3.5+、Opera 10.5+、Chrome 任意版本、Safari 3+

查看演示

Brent Traut

# 2008年2月25日

可能值得注意的是，此过程仅在您希望在内容不一定填充页面的页面上创建固定宽度/高度边框时才有用。否则，将所有内容包装在一个 div 中，赋予其“margin: 10px”，并将页面背景更改为您的边框颜色/样式，难道不是更有意义吗？

Brent Traut

# 2008年2月25日

哦，我明白了。我误解了他们想要边框贯穿所有可见区域。在这种情况下，我仍然认为使用 #page-container div 比使用 div 构建边框更好。同样，如果您可以在每个页面上确保足够的内容来填满浏览器窗口，则 page-container 可以使用“overflow: auto”。

Chris Coyier

# 2008年2月25日

@Brent：这真是一个聪明的想法，但这样做的麻烦在于，如果页面内容足够多以至于需要滚动，那么您将无法获得底部边框。通过这种方式，无论如何您都可以获得所有四个边框。

还值得注意的是，由于这些 div 是绝对定位的，因此它们在垂直方向上（z-index）自动堆叠得更高，高于页面上任何未绝对定位的其他内容。因此，它们将“覆盖”它们下方的任何内容。

Chaim Chaikin

评论永久链接# 2011年6月2日

使用一个带有四周边距的 div 来获取顶部、左侧和右侧边框，然后使用另一个 div 来构建底部边框怎么样？这样您只需要两个 div（或一个 div 和一个 b 标签）。这难道不是更有语义性吗？
Remy Bach

评论永久链接# 2011年6月3日

我部分同意 Brent 的观点，除了我会给 body 设置 '0 10px' 的填充，并使用两个 b 标签作为左右边框。
我猜唯一的问题是，如果网站需要水平滚动，但这应该避免。

Andrea

# 2008年2月25日

Brent 问了我将要做什么。:) 很高兴看到特定技术背后的“原因”，所以谢谢。

Tim Nash

# 2008年2月25日

Hicksdesign 链接中有一个额外的别名:D

Chris Coyier

# 2008年2月25日

谢谢 Tim，已修复。

koew

# 2008年2月26日

以下是一些补充信息：框架或边框框在设计中使用，并在名为“CSS Zengarden 设计：网页的视觉启蒙”的 CSS Zengarden 书籍中出版，您可以在此网址查看精彩的设计
http://www.csszengarden.com/?cssfile=069/069.css（作者：Mike Davidson）
尝试滚动并注意框架跟随。

André Luís

# 2008年2月26日

也许您可以使其稍微透明，以获得额外的精致感！不过，div 无法重叠。

Dejan Cancarevic

# 2008年2月26日

嗯，为什么不只使用一个带有边框的 div 而不是 4 个呢？

Arjan Terol

# 2008年2月26日

尚未测试，但应该可以正常工作

html {background-color:#5a5a5a;height:100%}
body {margin:10px;background-color:#fff57a;height:100%;border:8px inset #ff6e73;}

Chris Coyier

# 2008年2月26日

@Dejan：您可以使用一个带有边框的 div 使其看起来正确，只需将顶部/底部/左侧/右侧都设置为 0px，并应用固定位置和边框。但这会破坏整个布局！

请看，由于绝对定位的项目默认情况下在垂直堆叠顺序（z-index）中位于上方，因此该 div 将位于页面上的所有其他内容之上。即使使用透明的背景颜色，它仍然会“在顶部”，这会使任何链接失效并使文本无法选择。不好！

Chris Coyier

# 2008年2月26日

@Arjan：那里有更多的聪明想法，但如果您的页面内容垂直超出浏览器窗口并需要滚动，这种方式也无法获得底部边框。

Beau

# 2008年2月26日

我当时在想“难道不能为此使用一个包装 div 吗？”，但我看到您希望始终显示底部边框。不过，与其使用 4 个 div 来创建边框，不如使用一个包装 div 并设置顶部、左侧和右侧的边框，然后仅为底部边框使用一个绝对定位的 div？这样可能会使 CSS 更简单，并减少一些标记！

NatalieMac

# 2008年2月27日

我刚刚尝试了这个

html	{
	height: 100%;
	}

	
body	{
	border: 10px solid pink;
	min-height: 100%;
	padding: 10px;
	}
* html body	{
	height: 100%;
	}

它在 IE 和 FF 中都会给我一个底部边框，无论我的内容是否滚动。根本没有额外的标记。

唯一的小问题是，如果内容不足以使页面滚动，则页面的实际高度为 100% + 20px，因为边框会添加到高度中。

Vsevolod

# 2013年10月24日

稍微修改了一下你的代码

html{
    height:100%;
    height: -webkit-calc(100% - 20px);
    height: -moz-calc(100% - 20px);
    height: calc(100% - 20px);
}


body    {
        border:10px solid #fff;
    min-height: 100%;
    min-height: -webkit-calc(100% - 20px);
    min-height: -moz-calc(100% - 20px);
    min-height: calc(100% - 20px);
    padding: 10px;
    }

在 ie10+chrome 上测试过，工作完美，谢谢

Chris Coyier

# 2008年2月28日

@NatalieMac：在我看来，无论如何，这都会将底部边框推到可视区域之外。仍然是一个有趣的想法……我认为我们正在找到一种方法，可以用更少的标记来实现它。如果我们可以用这种方式制作顶部、右侧和左侧边框，然后只做一个固定的底部边框，那就只需要一个空 div 了，好多了。

Matt

# 2008年3月1日

有趣的技巧，我通常会以同样的方式使用填充，因此它确实增加了可用工具的库。

Bekir Cem

# 2008年3月1日

有趣..

好的..

谢谢。

Claudia

# 2008年3月2日

koew，

在我查看了您在http://www.csszengarden.com/?cssfile=069/069.css提供的示例之前，我无法理解想要这个的原因

那真的太漂亮了。

ItsBuiltForYou

评论永久链接# 2011年6月7日

是啊，当你的设计看起来像那样的时候！！但我完全同意这可能有点没用=）。除非有人真的非常想要这些边框！

Ralph

# 2008年3月7日

感谢这个 Css-Trick，我收藏了你的 Rss-Feed；)

Ralph

thinsoldier

# 2008年3月11日

我有一个梦想。

div#viewportBorder {
position:absolute;
top:0; left:0;
width: 100%; height: 100%;
border: 5px solid red;
clickthrough: true;
}

只有一个 div

Chris Coyier

评论永久链接# 2011年5月25日

几年后……现在我们有了`pointer-events`。值得一看！
Jan-Marten

评论永久链接# 2011年5月26日

呃，Chris.. pointer-events？说真的？我以为所有的人，你都会明白在 CSS 中宣扬界面功能是过分了，应该留给 JavaScript。
尽管如此，如果你指的是我所想的：#something:active 在这种情况下不会起作用，因为点击发生在顶部的元素上，而不是所讨论的链接上。此外，如果它能工作，你将看到奇怪的效果，比如布局的一部分在屏幕上“闪烁”。
Chris Coyier

评论永久链接# 2011年5月26日

我喜欢 pointer-events。耸肩。

它非常适合此线程中的代码。在整个页面上放置一个透明的 div 来实现边框，但这会覆盖内容并使内容无法点击。Pointer events 意味着你可以点击它。如果你问我，这属于 CSS 的范畴。我很乐意听到反驳，写一篇博文吧！

Andy Ford

# 2008年3月12日

html { 
  background: black; 
}
body {
  margin: 10px;
  background: white;
  height:100%;
  position:relative;
}
#bar {
  width:100%;
  background: black;
  position:fixed;
  bottom:0;
  height:10px;
}

似乎在 ff/mac 上有效，尚未在其他浏览器/操作系统上测试。

哦，看起来你实际上不需要在 body 元素上使用我发布的 css 的“position: relative”……无论如何，我的解决方案可能不是灵丹妙药，但我认为值得加入进来

Adrian Salceanu

# 2008年4月18日

你好
虽然如果正确使用，这种效果可能会很有趣，但应该指出的是，这四个 div 根本没有任何语义或结构意义——所以，这是一个很大的“错误”！但是，如果用于逐步增强标记，它可能会变得非常棒。感谢与我们分享。

The Floating frog

# 2008年10月1日

完全同意 Adrian 的观点，语义应该优先于样式，因为 CSS 应该仅仅补充你的标记。首先尝试使用已有的标记，如果那不合适，再用这种方式。

有几种技术可以达到这种效果，并且标记更少，但我的直觉告诉我，这种方法会遇到更少的问题。

感谢分享，伙计

Coby

# 2008年12月5日

啊哈，“语义”人士。他们总是出现，并在其他方面很棒的设计理念上打孔。我不是可用性或语义专家，但是否有必要始终考虑语义地编码你的布局？我不明白为什么不时刻将其放在心上会是一个如此大的“错误”。它真的会产生如此负面的影响，以至于会破坏访客的体验吗？我可能会因为说出这些话而受到这些人的斥责，但拜托，不要总是追求完美主义。

无论如何，在完全不同的方面，我想说你的网站很容易成为我最喜欢的 10 大网站之一，设计简直是天才！我一直很喜欢这个网站——继续努力！

Damien

# 2009年1月8日

Coby，如果没有理由使用语义/有意义的代码，你可以只使用表格来处理类似的事情。但是，表格不合理，因为你（可能）不会在边框内显示表格数据。

# 2011年5月25日

我正在使用 FF 4.0.1，它似乎没有在您最后一个示例中使用多色边框的顶部和底部的固定定位。

LastLifeLost

# 2011年5月25日

我觉得我遗漏了什么。为什么不能这样完成？

body:before {
			content: "";
			position: fixed; top: 0; bottom: 0; left:0; right:0;
			border:20px solid red;
			padding: 20px;
}

一个伪元素而不是两个，将第二个留给其他效果。

Chris Coyier

评论永久链接# 2011年5月25日

不确定那里的填充是为了什么。问题在于它是一个位于所有内容顶部的巨大图层，你将无法点击它并与页面交互。你可以尝试在其上使用 pointer-events: none; 这应该可以解决问题，但这是一个危险的领域，因为如果浏览器不支持它，整个页面就会崩溃。

当你有一个这样的想法时，为它创建一个测试页面！只需要一秒钟，你就能学习，我们就能学习，每个人都能更快地进步。
LastLifeLost

评论永久链接# 2011年5月26日

我确实对此进行了测试，但甚至没有想到要测试可用性方面的东西，比如点击链接。填充来自测试的早期版本。我知道一定有原因导致简单的解决方案不起作用！

Emprego

# 2011年5月26日

我喜欢这个技巧。谢谢。

Hiren Khambhayta

# 2011年5月26日

与常规相同，一些新东西。
现在我了解了 CSS 的“only screen and”选项

Vladimir

# 2011年5月26日

这太棒了 :)
CSS 太有趣了，尤其是在学习像这样的有趣新技巧时。

Max

# 2011年5月26日

只是为了加入另一个此类示例：24ways.org

Some guy

# 2011年5月26日

我不喜欢 body 边界，它们吸引了太多的注意力。

Julian

# 2011年5月28日

是否需要在“-webkit-box-shadow”中放入“inset”？

Chris Coyier

评论永久链接# 2011年5月28日

如果你这样做，阴影会进入元素内部，如果你不这样做，它会进入外部。

IT Rush

# 2011年5月28日

另一个有用的东西，希望能够让它工作..

Paul

# 2011年5月29日

给定一个顶部 Body 边界，以及一篇关于 Glow Form 的先前文章<https://css-tricks.org.cn/glowform/> 页面可以具有此<http://www.pushinpixels.co.uk/index.html> 仅在 webkit 中你才有动画，但我们有其他人的回退。

Nils

# 2011年5月31日

在 html 元素中添加边框不起作用吗？

GNO

# 2011年6月1日

@Nils，不，它不会以相同的方式工作，因为顶部和底部边框会随着内容一起滚动。但是……

@Chris Coyier，我知道这可能超出了本文的范围，但是将边框的颜色设置为html元素的背景色，并在body元素上设置边距和背景颜色，可以为较小的屏幕和移动设备提供一个不错的回退方案。它在较小的屏幕上提供了更多的垂直空间，并且不会像固定定位那样导致移动Safari出现问题。它甚至可以作为不支持固定定位和伪元素的浏览器的回退方案。

有人可能会说这是一个微不足道的细节，但我认为拥有这种回退方案可以带来更一致的感觉。

Richard

# 2011年6月1日

这个网站也有body边框
ibuypink.com

他将边框放入了无序列表中，并为每个侧面的列表项分配了类。

Nils

评论永久链接# 2011年6月1日

区别不是很大，但我喜欢使用无序列表而不是div的想法。

stygyan

# 2011年6月2日

也许这个想法会更好，你只需要一个额外的元素。

你将元素设置为fixed，自动宽度，然后left:10，right:10，top:10，bottom:10，并给它一个10px的边框。这样行不行？

stygyan

评论永久链接# 2011年6月2日

可以的，当然可以，但是你无法点击任何东西，因为新的元素会阻止点击。额外说明：你必须为left、right、top和bottom设置0px的值。

Joshua

# 2011年6月3日

在kottke.org的演示和实际的kottke.org之间切换时，我注意到指标的一些差异。以下修改将逐像素复制原始站点。

inset #19d4ff 0 0 0 4px,
inset #18cdf7 0 0 0 5px,
inset #53dfff 0 0 0 9px,
inset #50d8f7 0 0 0 10px,
inset #8ce9ff 0 0 0 14px,
inset #88e2f7 0 0 0 15px,
inset #c5f4ff 0 0 0 19px,
inset #bfecf7 0 0 0 20px;

raozuzu

# 2011年6月3日

不错的文章！那类似这样的方法呢？
我没有在Opera上测试过，但我认为如果它导致页面损坏，我只需要添加下面的代码行。
overflow-x: hidden; /* 用于Opera */

代码如下

body:after { content:" "; display: block; position: absolute; width: 100%;height: 100%;top:0; box-shadow: inset -20px -20px 0 pink, inset 20px 20px 0 pink; /* z-index: -1; 只需取消此注释即可将其设置为背景的一部分 */ padding: 60px; /* 最终的内边距，40px + 20px 的内阴影 */ position: fixed; }

我通常在想要在重复纹理上添加微妙的内阴影时使用这个方法，但我认为它也适合用来实现body边框。

请告诉我你对此有什么想法！
此致
raozuzu :)

felicja

# 2011年6月7日

这篇文章展示了如何使简单的事情复杂化……为了解决这个问题，我在firebug中写了：body {border:10px solid #000} 和 <div style="position: fixed; width: 100%; height: 10px; background: #000; left: 0; bottom: 0"></div>。并且它有效。我认为最简单的解决方案是最好的。

Sms

# 2011年6月11日

非常棒的教程！这对我来说意义重大。对于初学者来说是一个很好的开始。感谢您抽出时间完成所有这些工作！

Prince

# 2013年9月30日

您好，如何在我的网页周围添加一个**边框（带图像或一系列类似图像）**？有人建议使用下面显示的代码，但它无法正常工作。

div
{
-webkit-border-image:url(http...border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(http...border.png) 30 30 round; /* Opera */
border-image:url(http...border.png) 30 30 round;
}

Dingle

# 2013年11月3日

这就是你需要的一切

html {
    min-height: 100%;
    border: 10px solid red;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Yasmin

# 2014年2月25日

感谢这个，帮助很大！我唯一做不到的是让边框底部固定，以便我仍然可以滚动其中的内容而不会消失，所以我对其进行了一些修改，添加了一个div作为固定底部边框。

    html{
        min-height: 100%;
        border: solid 1em #E8EBED;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border-bottom:none
    }
    .border{
        position:fixed;
        width:100%;
        height:3.5em;
        background:#E8EBED;
        left:0;
        bottom:0;
        z-index:1;
    }

Guilherme Ventura

# 2014年3月25日

Chris，这是一个很棒的技术，但是，当页面内容不多时，body上的边框在垂直方向上不合适。为了解决这个问题，我只是在CSS中添加了这条规则。

html, body { height: 100%;  }

这使得即使页面内容不多时，技巧也能正常工作。

一切顺利

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。