Заставьте контент пройти через большую границу

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>

Он создает границу шириной ~ 90px вокруг div, к которому я его применяю. Теперь я хочу, чтобы каждый контент внутри div с borderedCanvas расширялся до границы 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 для абсолютного позиционирования, чтобы вы могли позиционировать псевдоэлемент так, как вам хочется.

Итак, комбинируя псевдоэлементы с рамкой-изображением и позиционированием, вы можете активировать петлю эффектов, как это легко.

Answer 2

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 поддерживается

с отрицательными полями, фактически вы нарушите внешний вид в старых браузерах!

, так как теперь вам нужно вставить, так как выdo, элемент-обертка внутри ограниченного содержимого:

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

Answer 3

Отрицательное заполнение не работает ... Заполнение - это внутренняя заливка элемента, а не внешняя.Вместо этого используйте поле: -60px.