0

我有一个页面，我希望边框超过一行。

h2.bord
{
border-style:inset;
border-width:8px;
border-color:green;
background-color:black;
color:white;
text-align:center;
}

这（使用时）在文本周围显示边框。然而，我想家不止我一条线在这个边界。

帮助？

4

4 回答 4

3

使用带边框的 div 并在其中放置此 h2 边框

于 2012-05-04T08:17:35.730 回答
1

是border-style:double;你要找的吗？

或者，如果您想要的不仅仅是双边框或多种样式的边框，您可以使用多个嵌套 div，例如

<style>
  .inset-border { border: 4px inset Black; }
  .double-border { border: 4px double Black; }
</style>

<div class="inset-border">
  <div class="double-border">
    <h2>content</h2>
  </div>
</div>
于 2012-05-04T08:18:24.307 回答
0

标准 CSS 边框最多只支持双线（参见@Jaimal 的回答）。

如果您需要更多，您需要尝试以下操作：

  • 附加标记：即更多的容器元素，每个元素都有自己的边框。
  • 使用:beforeand:after并给他们一个border. 做得对，它们应该包裹在原来的盒子上，并给你额外的边框。在 IE6 或 IE7 中不起作用。
  • 使用outline除border. 大纲的工作方式与边框非常相似，但确实有一些细微差别。但是，如果除了border-style:double;. 请注意，它可能不适用于旧版浏览器。
  • CSS3 border-image。使用它，您可以为边框定义自己的图形，这意味着您可以定义任意多的线条。注意：这肯定不会在旧浏览器中工作；它只是 CSS 的一个相当新的补充。
  • 用来造假background-image。如果您知道盒子的大小，这可能是最简单且跨浏览器兼容的方式。但是，如果您事先不知道盒子的大小，那就没那么有用了。

希望有帮助。

于 2012-05-04T08:27:46.513 回答
0

我假设您正在尝试实现 3d/“凸起”类型的边框；如果是这样，那么您可以简单地使用border-style: groove：JS Fiddle 演示。

但是，如果可以，您可以使用::after伪元素和outset边框样式：

h2.bord {
    border-style:inset;
    border-width:8px;
    border-color:green;
    background-color:black;
    color:white;
    text-align:center;
    position: relative; /* in order to position the pseudo element relative to the parent */
    margin: 8px; /* to move the edges of the element from the container element in order to see the borders of the pseudo-element */
}

h2.bord::after {
    content: '';
    position: absolute;
    top: -16px;
    left:-16px;
    right: -16px;
    bottom: -16px;
    border: 8px outset green;
}

​<a href="http://jsfiddle.net/davidThomas/RuQGU/" rel="nofollow">JS Fiddle 演示。

于 2012-05-04T08:29:12.273 回答