正文边框，圆角内侧 | CSS-Tricks

读者 Arun 询问了如何制作正文边框，使其在内部边缘处圆角。就像这样。我们之前已经介绍过正文边框，但这有点不同。

乍一看确实有点令人困惑。您无法像使用 CSS 一样使用奇怪的内部圆角，那简直是胡说八道。但是，如果您只是将它视为一个普通的圆角元素叠加在一个正方形元素之上，它看起来就不会那么奇怪了。因此，这是尝试 #1

Check out this Pen!

但如果仅仅出于设计原因而存在的额外元素让我们感到困扰，我们实际上可以使用 <body> 元素上的 border-image 来实现这一点。请记住，border-image 本质上就是“九宫格”缩放。四个固定大小的角，四个沿一个轴重复的边，以及一个可拉伸的中间部分。

非常容易

body {
  border-image: url(rounded-edge.png) 25% repeat;
  border-width: 25px;
}

请注意，IE（任何版本）都不支持 border-image。

Check out this Pen!

但是但是但是滚动

我们需要问的是，“正文边框”始终具有可见的底部边框有多重要。如果底部部分可以随着页面长度超过视窗而滚动，那就很简单了。

我们只需确保正文至少有那么大，但可以变得更大

* { box-sizing: border-box; }
html { height: 100%; }
body { min-height: 100%; }

Check out this Pen!

如果底部边框不能滚动（始终可见），那么我们必须再次使用那个额外的元素。只是我们需要确保它可以垂直滚动。不过，除非我们在使用 WebKit，否则该滚动条可能会影响圆角，因为我们可以调整滚动条的外观以确保一切正常。

body {
  background: #5bb0ff;
}

.page-wrap {
  position: fixed;
  top: 10px;
  right: 10px;
  left: 10px;
  bottom: 10px;
  background: white;
  border-radius: 10px;
  padding: 20px;
  overflow-y: scroll;
}

::-webkit-scrollbar-track {
  background: none;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 5px;
}

Check out this Pen!

这就是我所有的想法。

Jeremy

# 2013年4月5日

补充一点：在 .page-wrap 类中添加 -webkit-overflow-scrolling: touch; 以在 iOS 设备上保留惯性滚动。

Chris Heilmann

# 2013年4月5日

也许太简单了，但为什么不直接在正文上使用圆角和边距呢？ http://jsbin.com/ilaxeb/1/edit

Chris Coyier

评论永久链接# 2013年4月5日

这样也很好，因为这些是必需的元素，所以最好使用它们。请记住使用 box-sizing: border-box 将高度保持为 100%。并使用 min-heights 而不是 height，以便区域可以扩展。然后决定您是否希望底部始终可见，这将决定您是否应该使用固定位置 + overflow: scroll 方式。
Tomasz Stryjewski

评论永久链接# 2013年4月5日

我的看法（在想要发布我的内容时看到了您的内容，+Chris） http://codepen.io/anon/pen/KohAa

Dean Sofer

# 2013年4月5日

http://jsbin.com/ilaxeb/11/edit

html {
  box-sizing: border-box;
  padding: 10px;
}
body {
  height: calc(100%-20px);
}

Tom Pietrosanti

评论永久链接# 2013年4月5日

我正要提出同样的建议！虽然我承认我打算填充 html 元素而不是在正文上添加边距，但我认为现在您提到了在正文上添加边距，我更喜欢这种方式。
Hugo Giraudel

评论永久链接# 2013年4月6日

这正是我想要做的事情。

快速测试：http://jsfiddle.net/GExZa/
Adam

评论永久链接# 2013年4月6日

我一直都在想这个问题！强行将解决方案应用于 body 标签似乎有点过头了，但是，谁知道什么时候这个技巧会派上用场呢

Rob Warren

# 2013年4月5日

使用伪元素，因此它可以在网站的任何地方使用这里

Ryan McKay

评论永久链接# 2013年4月8日

这有效，除非您想在边框内显示滚动条……然后它就会变得有点棘手，需要更多的 CSS 或另一个元素

James

# 2013年4月6日

Firefox 支持 border image :)

Louis

# 2013年4月6日

Firefox 不支持 border-image？这是从什么时候开始的？我的意思是，我并不关心，因为它是一个非常无用的功能，但根据 MDN 和 caniuse.com 的说法，它从版本 15 开始就支持无前缀的功能。

但是，经过测试后，您是对的，它不起作用。但这是怎么回事呢？我不记得看到过关于它的任何信息……？

Chris Coyier

评论永久链接# 2013年4月6日
我不得不试着调整一下，结果发现它确实支持 border-image，只是对它有点挑剔。我更新了文章。

不起作用
```
border-image: url(img.png) 25% repeat;
border-width: 25px;
```
起作用
```
border: 25px solid;
border-image: url(img.png) 25% repeat;
```
我想 Firefox 需要 border-style 才能执行操作，除了 border-width 之外。

我认为 border-image 确实有点用，只是名字不好。我认为如果它更接近于
```
background: nine-slice-scaling(args);
```
Peter Mumford

评论永久链接# 2013年4月11日

border-image 还有很长的路要走，才能变得有用。它与 svg 的配合不好，即使对于普通的 png 图像，在不同浏览器中的实现也不一致。它不值得使用。

Adam

# 2013年4月6日

不使用 border image，使用阴影效果怎么样？

http://codepen.io/anon/pen/BdoHn

Manish Salunke

# 2013年4月6日

哇！非常棒的小贴士。谢谢。

Vesa Piittinen

# 2013年4月6日

我尝试通过使用 display: table; 来赢得原创性竞赛。

太可惜了，它只支持 IE9+（也意味着最新的 Firefox、Chrome 和 Opera 都可以正常工作）。

Vesa Piittinen

评论永久链接# 2013年4月6日

……然后我注意到 CodePen 示例中并不明显的功能，它还需要始终保持底部边框可见。

因此，这里有一个解决方法。

它将滚动条保留在应有的位置。此外，没有额外的标记。

Vesa Piittinen

# 2013年4月7日

第三个也是（我希望是）最后一个版本

http://codepen.io/Merri/full/ucEmg

很多 CSS，但它为正文边框提供了非常好的透明度效果。您可以看到正文内容在边框后面滚动，包括圆角。

JDewitt

评论永久链接# 2013年4月7日

做得很好！
Peter Mumford

评论永久链接# 2013年4月11日

safari 5.1.7 显示方形角

Venecijaneri

# 2013年4月7日

非常棒的说明！非常感谢您！

Eryk Piast

# 2013年4月7日

这是一个非常简单（或者更确切地说，很粗糙）的替代方法。没有内容包装器，底部边框始终可见，滚动条在边框外部（如果您关心非 WebKit 浏览器，这可能很有用）。

http://codepen.io/erykpiast/pen/eDKpv

Kaloyan Banev

# 2013年4月8日

CSS 能力的绝佳示例。自从它被引入以来，我认为这是发生在网页设计师和开发人员身上的最好的事情之一。非常棒的教程！

Chuck

# 2013年4月8日

另一种使用边框和盒阴影的方法

http://codepen.io/anon/pen/bnBKC

Arun Raj

# 2013年4月8日

感谢 Chris 解释了我的疑问，并抽出时间为它写了一个教程……

Ramesh Chowdarapally

# 2013年4月9日

哇……不错 chris……
这真的很有趣，而且学到了很多东西。

Philipp

# 2013年4月9日

为什么不使用 before 元素？ http://dabblet.com/gist/5346231 这应该适用于 body。

Tim

# 2013 年 4 月 9 日

这个怎么样？
http://codepen.io/anon/pen/hjwgD

谢谢。

Nemanja Cosovic

# 2013 年 4 月 10 日

不用两个 div 不更容易吗？第一个作为容器，第二个作为内容持有者。这样你就完全移除图片了，所有东西都是基于 CSS 的。

Armstrongest

评论永久链接# 2013 年 4 月 10 日

是的。这是 Chris 的第一个例子。
Nemanja Cosovic

评论永久链接# 2013 年 4 月 10 日

是的，但他仍在使用背景图片。
Vesa Piittinen

评论永久链接# 2013 年 4 月 10 日

你不需要两个 div。在一个常规页面中，有足够多的元素可以使用这些元素和一些伪元素来完成所有操作。我在上面的评论中发布了我的“第三次尝试”，它无需图片，也不需要额外的 HTML 标记，同时还添加了一些很酷的附加功能，例如能够为整个边框（包括圆角区域）提供半透明效果，同时仍然保持内容的可点击性。

你可以在网上任何页面上使用这段代码，它会为网站的 body 提供边框效果，虽然在 * { box-sizing: border-box; }（比如在这个网站上）中，它会失效，你需要添加一些 box-sizing: content-box; 规则来让它正常工作。

Lea Verou

# 2013 年 4 月 13 日

如何利用轮廓不圆角而阴影圆角的事实，并像这样操作呢？http://dabblet.com/gist/5377617

Merri

评论永久链接# 2013 年 4 月 13 日

实际上并不需要 outline 规则，因为我们想要做的是将其包裹在视窗周围。box-shadow 会起作用，但任何单一元素解决方案的缺点是，边框应该在内容之上，但我们不想阻止对内容的访问。不幸的是，CSS 中没有办法强制忽略元素的透明背景。

以下是根据你的 box-shadow 建议针对该问题的 CodePen：http://codepen.io/Merri/pen/KGqsh

maxw3st

# 2013 年 5 月 24 日

此演示在 Firefox 中不起作用。所以我添加了规则

    html {
        background: transparent;
    }

将它添加到 codepen 中的演示使它们在 Firefox 中也能正常工作。

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