使用边框图像的 CSS 正文边框答案

【问题标题】：CSS body border using border image使用边框图像的 CSS 正文边框
【发布时间】：2020-11-08 13:47:42
【问题描述】：

我正在尝试创建一个与本示例中的几乎完全相同的主体边框：它会随着窗口的大小而变化，但不受溢出的影响。

https://css-tricks.com/examples/BodyBorder/

不过，我找不到任何有关如何使用border-image 执行此操作的信息。我已经设置好了border-image 及其参数；我只是不知道如何在不被溢出破坏的情况下将它应用到正文，我尝试过的所有代码的 sn-ps 要么完全阻止滚动，使得溢出简单地消失在页面上方，或者未能防止边界被溢出打断。

如果启动时有一些方便的方法可以在边框边缘设置一个区域，溢出文本会消失，那就太好了。

编辑：添加样式代码。针对其中一个 cmets，我想专门使用一个图像——一个边框图像，而不仅仅是颜色。我只是想调整我已经工作的边框图像样式。

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

【问题讨论】：

您想要图像作为边框还是颜色？添加一些 HTML 和 CSS 代码，以便更好地理解您的问题。
请添加您的代码，以便我们为您提供帮助:)
我清理并添加了我所有的样式代码。

标签： css border-image

【解决方案1】：

您可以为效果使用单独的元素，而不是直接设置 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>

【讨论】：

【解决方案2】：

这可能会对您有所帮助。你不需要使用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;
}

你可以找到jsfilehere

【讨论】：

我可能还不太清楚——我已经有一个边框图像，我想使用该图像而不是颜色作为边框。我同时使用该边框图像作为边框，并使用颜色渐变作为背景。我实际上已经通过将边框移动到 html 而不是 body 来使边框正确适合窗口，但不幸的是，滚动会破坏它。
你不应该给 html 标签添加样式。它不标准，也不清楚。你试过overflow-x:hidden; 吗？
下次我为你修好小提琴时检查一下。如果有效，请告诉我更新答案。 jsfiddle.net/cfLndb34
我刚刚开始将所有内容都作为单独的元素来做，似乎很有魅力。 :) 如果你好奇，我会上传最终结果。