サイト全体を固定枠で囲む
デメリット
・サイトが狭く感じる
・【https://ensemble-stars.jp/】のように固定枠にグラデーションを使った場合、それ以外の部分に使える色が白黒に限定される
実線枠
body {
border: 10px solid #47a89c;
}
ストライプ枠
body {
background: -webkit-linear-gradient(-135deg, #fff, #fff 10px, #47a89c 0, #47a89c 20px);
background: repeating-linear-gradient(-135deg, #fff, #fff 10px, #47a89c 0, #47a89c 20px);
padding: 20px;
}
.container {
background: #fff;
}
グラデーション枠
html:before,
html:after,
body:before,
body:after {
position: fixed;
display: block;
content: "";
}
/* 上 */
html:before {
top: 0;
left: 0;
width: 100vw;
height: 10px;
background: linear-gradient(0deg, rgba(255, 243, 0, 0.4), rgba(255, 162, 2, 1))
}
/* 右 */
html:after {
top: 0;
right: 0;
width: 10px;
height: 100vh;
background: linear-gradient(90deg, rgba(255, 243, 0, 0.4), rgba(255, 162, 2, 1));
}
/* 下 */
body:before {
bottom: 0;
left: 0;
width: 100vw;
height; 10px;
background: linear-gradient(180deg, rgba(255, 243, 0, 0.4), rgba(255, 162, 2, 1));
}
/* 左 */
body:after {
top: 0;
left: 0;
width: 10px;
height: 100vh;
background: linear-gradient(-90deg, rgba(255, 243, 0, 0.4), rgba(255, 162, 2, 1));
}