1

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

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

不过，我找不到任何有关如何使用 a 来执行此操作的信息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>

4

2 回答 2

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>

于 2020-07-19T04:49:09.473 回答
0

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

你可以在这里找到 jsfile

于 2020-07-19T04:49:42.823 回答