css - 如何让内容与边框图像紧密贴合

Question

fiddle

.chrome-frame {
    border-width: 80px 120px 1px 324px;
    border-image: url(http://i.imgur.com/m7QqzJi.png) 80 120 1 324 stretch;
    border-image-outset: 0;
    box-sizing: border-box;
}

<div class="chrome-frame">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem earum in necessitatibus neque veritatis. Ab aspernatur delectus dignissimos eaque eius fugiat hic, ipsa modi natus, officiis reiciendis sequi totam voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit id neque nostrum perferendis, quam quas quibusdam, quisquam quos repellat repellendus, repudiandae sequi. Amet dolor eligendi excepturi ipsa molestiae placeat veniam!</div>

border-image 要求我设置巨大的边框以正确呈现我的图像边框，但我不希望我的内容被推到那么远。

如何让我的内容忽略边框，以便我可以使用填充来按我想要的方式定位它？

Answer 1

将边框图片放在::before伪元素中，放在文本后面。文本本身可以使用填充来定位。

.chrome-frame {
  position: relative;
  padding: 90px 10px 10px 10px;
}
.chrome-frame::before {
    display: block;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    content: "";
    border-width: 84px 120px 1px 324px;
    border-image: url(http://i.imgur.com/m7QqzJi.png) 84 120 1 324 fill;
    border-image-outset: 0;
    box-sizing: border-box;
}

<div class="chrome-frame">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem earum in necessitatibus neque veritatis. Ab aspernatur delectus dignissimos eaque eius fugiat hic, ipsa modi natus, officiis reiciendis sequi totam voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit id neque nostrum perferendis, quam quas quibusdam, quisquam quos repellat repellendus, repudiandae sequi. Amet dolor eligendi excepturi ipsa molestiae placeat veniam!</div>