如何使渐变边框保持在屏幕上

Question

JsFiddle

HTML

<div class="content">Blabbles</div>

CSS

html, body {
    margin: 0;
    height: 100%;
    min-height: 100%;
    position: relative;
}

html{
    border-image: linear-gradient(rgba(248,80,50,1), rgba(255,153,51,1)) 40% repeat;
    border-width: 10px;
}

尝试在屏幕周围保留渐变边框，但是当内容较长时，内容会通过，边框会向上/向下滚动。

尝试了两种方法：位置：固定和背景附件：固定但无论内容是长还是短，它们都不会使边框停留在屏幕上。

如果内容更长，如何让内容通过边框？

Answer 1

Codepen http://jsfiddle.net/d3ckg18e/5/

CSS代码（无需将height / min-height设置为html或body元素

body:before {
    box-sizing : border-box;
    position   : fixed;
    z-index    : 1;
    height     : 100vh;
    width      : 100%;
    content    : "";
    border-image : linear-gradient(rgba(248,80,50,1), rgba(255,153,51,1)) 40% repeat;
    border-width : 10px;
    pointer-events: none;
}


.content {
   padding: 15px;
}

<强>结果

Answer 2

编辑答案不正确，这不是OP想要的具体内容。我会在这里保留这个，这可以帮助其他人。

这可以通过放置height: auto和min-height: 100%来完成。我将其添加到包装器中，因此您无需直接设置body样式。这是JSFIDDLE，但这里是我使用的代码：

html, body {
    margin: 0;
    height: 100%;
    min-height: 100%;
    position: relative;
}

#wrapper {
    border-image: webkit-linear-gradient(rgba(248,80,50,1), rgba(255,153,51,1)) 40%     repeat;
    border-image: moz-linear-gradient(rgba(248,80,50,1), rgba(255,153,51,1)) 40%     repeat;
    border-image: o-linear-gradient(rgba(248,80,50,1), rgba(255,153,51,1)) 40%     repeat;
    border-image: ms-linear-gradient(rgba(248,80,50,1), rgba(255,153,51,1)) 40%     repeat;
    border-image: linear-gradient(rgba(248,80,50,1), rgba(255,153,51,1)) 40%     repeat;
    border-width: 10px;
}

.content{
    height: auto;
    width: 100%;
    margin: 10px auto;
    min-height: 100%;
}

P.S。我也做到了这样，渐变将适用于所有浏览器。