css - 使内容跨越大边界

Question

我有以下规则:

.borderedCanvas{
    border-width: 89px 95px;
    -webkit-border-image: url(/images/canvas_bg.png) 89 95 repeat stretch;
    -moz-border-image: url(/images/canvas_bg.png) 89 95 repeat stretch;
    border-image: url(/images/canvas_bg.png) 89 95 repeat stretch;
    width: 700px;
}
.borderedContent{
    margin: -60px;
    width: 820px;
    display: block;
}

以及以下 html:

<div id="login" class="borderedCanvas">
  <div id="loginBox" class="borderedContent">
    <form>
    ...
    </form>
  </div>
</div>

它在我应用它的 div 周围创建了一个 ~90px 宽的边框。现在我希望 borderedCanvas div 内的每个内容都扩展到边框 60px 内。这是因为虽然我不得不使用 ~90px，但真正的边框看起来好像只有 20px。我尝试将以下规则添加到 .borderedCanvas 但没有效果:padding: -60px;

Answer 1

实际上，不要忘记您使用的是 CSS3，而且在使用 CSS3 的同时您也可以使用 CSS2。 CSS2 有伪元素和所有其他有趣的东西!

因此，您只需使用像 ::before 这样的伪元素，就可以在没有任何额外元素的情况下实现您想要的东西!

所以，有一个 fiddle :http://jsfiddle.net/kizu/UxJ8H/

值得一提的事情:

1. 了解如何在伪元素上使用负 z-index 并在元素本身上使用正值，以将内容放入伪元素用户。

2. 使用 CSS2，您可以为绝对值设置 left+right 和 top+bottom 值同时定位，因此您可以根据需要定位伪元素。

因此，将伪元素与 border-image 和定位相结合，您可以像这样轻松地激活大量效果。