css - ボーダー画像を使用した CSS ボディボーダー

Question

この例とほぼ同じように、ボディの境界線を作成しようとしています。ウィンドウのサイズによって変化しますが、オーバーフローの影響を受けません。

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

border-imageただし、具体的にこれを行う方法に関する情報は見つかりません。私はすでに自分border-imageとそのパラメータをすべて設定しています。オーバーフローによって壊れずに本文に適用する方法がわかりません。私が試したコードのすべてのスニペットは、スクロールを完全に妨げて、オーバーフローがページの上で単に消えるか、または防止できませんでした境界がオーバーフローによって中断されないようにします。

おまけに、境界線の端に、はみ出したテキストがフェードする領域を設ける便利な方法があればいいのにと思います。

編集: スタイルコードを追加します。コメントの 1 つに応えて、具体的に画像を使用したいと思います。色だけでなく、境界線の画像です。すでに作業している境界線の画像スタイルを適応させたいだけです。

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

score 1 · Accepted Answer

直接スタイリングする代わりに、効果に別の要素を使用できます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>

score 0 · Accepted Answer

これはあなたを助けるかもしれません。使用する必要はなく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を見つけることができます

css - ボーダー画像を使用した CSS ボディボーダー

2 に答える 2

Related

Reference