我正试图创建一个与本例中的边界非常相似的主体边界：它随着窗口的大小而变化，但不受溢出的影响。
https://css-tricks.com/examples/BodyBorder/
不过，我找不到任何关于如何使用border-image具体实现这一点的信息。我已经设置好了我的border-image及其参数；我只是不知道如何在不被溢出打断的情况下将其应用于正文，我尝试过的所有代码片段要么完全阻止了滚动，导致溢出在页面上方消失，要么未能阻止边框被溢出打断。
如果在启动时，有一些方便的方法在边框边缘设置一个溢出文本会褪色的区域，那就太好了。
编辑：添加样式代码。作为对其中一条评论的回应，我想专门使用一个图像——边界图像，而不仅仅是颜色。我只是想调整我已经工作的边界图像风格。
<!DOCTYPE html>
<html>
<head>
<style>
p {
white-space: ;
color: white;
word-break: break-all;
font-weight: normal; text-shadow: .3vw .3vw #000000; font-size: 4vw; text-align: center; margin: 4vw;
}
body {
border: 1px solid transparent;
padding: 0px;
border-image: url(border.png) 10% round;
border-image-slice: 26 26 26 26;
border-image-width: 3vw 3vw 3vw 3vw;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
display: flex;
flex-direction: column-reverse;
overflow: auto;
}
html {
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: #70bg32;
background-repeat: no-repeat;
background: -webkit-linear-gradient(#6363BD, #000052);
background: -moz-linear-gradient(#6363BD, #000052);
background: -ms-linear-gradient(#6363BD, #000052);
background: -o-linear-gradient(#6363BD, #000052);
background: linear-gradient(#6363BD, #000052);
}
</style>您可以使用单独的元素来获得效果，而不是直接设置body的样式。
:root {
--page-border-width: 3vw;
}
* {
box-sizing: border-box;
}
body {
background: #6363bd;
padding: var(--page-border-width);
margin: 0;
}
.page-border {
border: 1px solid transparent;
border-image: url(https://placehold.it/10) 10% round;
border-image-slice: 26 26 26 26;
border-image-width: var(--page-border-width);
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
}
.page-border:after {
content: '';
background-image: linear-gradient(transparent, hsla(0, 0%, 0%, .5));
height: 20vh;
position: fixed;
left: 0;
bottom: 0;
width: 100vw;
}
p:first-of-type {
margin-top: 0;
}<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="page-border"></div>这可能会对您有所帮助。你不需要使用border-image，它只需要边框就可以轻松处理，而且它的灵活性也取决于窗口的大小。尽管使用overflow-x不是最好的方式！
HTML代码：
<body>
<div class="flex">
<p>
blablabla
</p>
<p>
blablabla
</p>
<p>
blablabla
</p>
<p>
blablabla
</p>
</div>
Css代码
body{
background-color:#fff;
height:100%;
width:100%;
overflow-x: hidden;
}
.flex{
width: auto;
height:auto;
border:50px solid blue;
display:block;
}
p{
width: auto;
display: block;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 20px;
padding-left: 20px;
}
你可以在这里找到jsfidle