如何为分隔线制作完整的 window 页高边框？

Question

我正在尝试为网站创建登录页面，https://essaydapp.com 提交并尝试进入应用程序。我正在尝试模仿他们的设计（参见 link），但我遇到了一些问题：

截图：

在第一个屏幕截图中，您可以看到 1px 的小虚线边框，我希望它是整个页面的高度，而不仅仅是表单的高度。在第二个屏幕截图中，您可以在页面边缘和顶部看到白色，但我也希望它是蓝色的。

提前感谢您的帮助。

form {
  /*border: 10px solid #1acebc;*/
  padding: 28px;
  border-left: 1px solid black;
  border-left-style: dashed;
  border-right: 1px solid black;
  border-right-style: dashed;
}

button:hover {
  opacity: 0.8;
}

button {
  background-color: #09c;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

input[type=text],
input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #1acebc;
  box-sizing: border-box;
}

img {
  display: block;
  margin: 0 auto;
  padding-bottom: 60px;
  padding-top: 30px;
  width: 300px;
  height: 300px;
}

body {
  background-color: #e7f3f6;
  /*border-left: 250px solid #007da5;
  border-right: 250px solid #007da5;*/
  border-left: 175px solid #007da5;
  border-right: 175px solid #007da5;
  padding-top: 175px;
  padding-bottom: 215px;
}

<form>
  <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" alt="profilepicture">
  <input type="text" placeholder="Username">
  <input type="password" placeholder="Password">
  <button type="button" name="Login">Login</button>
</form>

Answer 1

此代码删除左右两边的任何填充。我希望这就是你想要的。

body{
    border: 1px dashed;
    backgroud-color: #e7f3f6;
    margin-left: 0px;
    margin-right: 0px;
}

Answer 2

您现有的代码有些混乱。相反，我建议使用以下 flex-box 解决方案

body {
  padding: 0;
  margin: 0 auto;
  background-color: #007da5;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

form {
  display: flex;
  width: 75%; /*Set the width required*/
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #e7f3f6;
  border-left: 1px dashed black;
  border-right: 1px dashed black;
}

img {
  width: 300px;
  height: 300px;
  padding-bottom: 60px;
  padding-top: 30px;
}

button:hover {
  opacity: 0.8;
}

button {
  background-color: #09c;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 85%;
}

input[type=text],
input[type=password] {
  width: 85%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #1acebc;
  box-sizing: border-box;
}

<form>
  <img src="https://i.imgur.com/ihZBCxx.png" alt="profilepicture">
  <input type="text" placeholder="Username">
  <input type="password" placeholder="Password">
  <button type="button" name="Login">Login</button>
</form>

如何为分隔线制作完整的 window 页高边框？

How to make a full window page height border for divider?

html

css

border