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/

值得一提的事情：

了解如何对元素本身具有正数的伪元素使用否定z-index以将伪元素用户放入内容。
使用CSS2，您可以同时设置left + right和top + bottom值以进行绝对定位，这样您就可以定位伪 - 像你想要的元素。

因此，将伪元素与边界图像和定位结合起来就可以像这样轻松地激活效果。

Answer 2

负填充不起作用......填充是元素的内部填充，而不是外部填充。使用保证金：-60px代替。

Answer 3

http://www.w3.org/TR/css3-background/#border-image-outset

https://bugzilla.mozilla.org/show_bug.cgi?id=564699

https://bugzilla.mozilla.org/show_bug.cgi?id=497995

这将在下一版本的浏览器中发布，并且将像负填充一样工作，但仅相对于border-image，并且仅在支持border-image的情况下

带有负边距，事实上，你会破坏旧版浏览器的外观！

现在你需要像边框内容一样插入一个包装元素：

<div class="borderimg">
    <div class="fixpos" style="margin:-20px;">
        your content here
    </div>
</div>

让内容超越大边界

3 个答案: