让内容超越大边界

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 divs中的每个内容都扩展到60px的边框内.这是因为虽然我不得不使用~90px,但实际边框看起来好像只有20px.我尝试将以下规则添加到.borderedCanvas它没有效果:padding:-60px ;

Answer 1

实际上,不要忘记你正在使用CSS3,而当你使用CSS3时,你可以使用CSS2.CSS2有伪元素和所有其他多汁的东西!

所以,你可以通过使用伪元素来实现你想要的东西而不需要任何额外的元素::before!

所以,有一个小提琴:http://jsfiddle.net/kizu/UxJ8H/

值得一提的事:

1. 了解如何z-index对元素本身具有正数的伪元素使用否定以将伪元素用户放入内容.

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

因此,将伪元素与边界图像和定位相结合,您可以像这样轻松地激活效果.