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 requires me to set huge borders to render my image border correctly, but I don't want my content nudged in that far.

How can I get my content to ignore the borders so that I can use paddings to position it how I want?

Answer 1

Put the border image in the ::before pseudo element and put it behind the text. The text itself can be positioned using padding.

.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>

Answer 2

我选择了一个不同的解决方案。这有点灵活，我认为有更好的浏览器兼容性。

＆＃13;

.chrome-frame {
    background: #f7f7f7 url(http://i.stack.imgur.com/jNvtF.png) top left repeat-x;
    position: relative;
    padding: 85px 6px 6px 6px;
    border: 1px solid #c2c2c2;
}

.chrome-tl {
    background: url(http://i.stack.imgur.com/TVQ3z.png) top left no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 326px;
    height: 81px;
}

.chrome-tr {
    background: url(http://i.stack.imgur.com/wWuRT.png) top right no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    width: 123px;
    height: 81px;
}

＆＃13;

<div class="chrome-frame">
    <div class="chrome-tl"></div>
    <div class="chrome-tr"></div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. At blanditiis ducimus excepturi laudantium quam, quod repellat? A aperiam corporis dicta dolore doloremque explicabo inventore laboriosam molestiae pariatur, perferendis, reiciendis sed.
</div>

＆＃13;

在afterTextChanged()上调整大小以查看其行为。

Answer 3

If you want to do it in a less hacky way, you can just wrap your text in another div, and then apply negative margin to it, like this:

<div class="chrome-frame">
     <div>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>
</div>

.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;
}

.chrome-frame div {
    margin-left: -300px;
}

However, the most elegant way would be to just use the image as a background image instead of a border image.

How to get content to fit snug with border-image

3 个答案: