插入阴影白色 space

Question

实际上我正在尝试自己为我的类做一个网站，我有一个输入和阴影之间有一些白色 space 的插入边框阴影问题我认为。所以如果有可能得到一些帮助。

代码如下：https://jsfiddle.net/LeLicorne_/62xsn1gz/

:root {
  --primary-color: #252525;
  --secondary-color: #181818;
}


/*---------------------------------------------------------------------------------*/

body {
  margin: 0;
  padding: 0;
  background: #333333;
}


/*---------------------------------------------------------------------------------*/

a {
  text-decoration: none;
}

.right {
  display: flex;
  padding: 0;
  margin: 0;
  height: 100vh;
  width: border-box;
}

.right .contact {
  background: none;
  position: absolute;
  margin-top: 0;
}

.right .contact .loc {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0;
}

.right .contact .loc .contactleft {
  position: absolute;
  width: 765px;
  height: 600px;
  left: 115px;
  top: 0;
  background: var(--primary-color);
  box-shadow: 0px 0px 5px 5px var(--primary-color);
  border-radius: 20px;
}

.right .contact .loc .contactleft label {
  display: block;
  font-size: 40px;
  margin: 20px;
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  color: white;
  align-items: center;
}

.right .contact .loc .contactleft #name {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 35px;
  border-radius: 10px;
  border: none;
  font-size: 20px;
  box-shadow: inset 0px 0px 5px 5px var(--secondary-color);
  background: white;
}

.right .contact .loc .contactleft #email {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 35px;
  border-radius: 10px;
  border: none;
  font-size: 20px;
  box-shadow: inset 0px 0px 5px 5px var(--secondary-color);
  background: white;
}

.right .contact .loc .contactleft #message {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 150px;
  border-radius: 10px;
  border: none;
  font-size: 20px;
  box-shadow: inset 0px 0px 5px 5px var(--secondary-color);
  background: white;
}

.right .contact .loc .contactleft .sendmessage {
  display: block;
}


/*---------------------------------------------------------------------------------*/

@keyframes yellow {
  0% {
    color: white;
    background: var(--primary-color);
    box-shadow: 0px 0px 5px 5px var(--primary-color);
  }
  50% {
    color: yellow;
    background: var(--secondary-color);
    box-shadow: 0px 0px 5px 5px var(--secondary-color);
  }
  100% {
    color: white;
    background: var(--primary-color);
    box-shadow: 0px 0px 5px 5px var(--primary-color);
  }
}


/*---------------------------------------------------------------------------------*/


/* Ensemble */

::-webkit-scrollbar {
  width: 10px;
}


/* Track */

::-webkit-scrollbar-track {
  background: #f1f1f1;
}


/* Handle */

::-webkit-scrollbar-thumb {
  background: #888;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}


/* Handle hover */

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

<!DOCTYPE html>
<html lang="en">


<head>
  <meta charaset="utf-8">
  <link rel="stylesheet" href="css/style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lo Re Baptiste</title>
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</head>


<body>

  <div class="right">
    <div id="contact" class="contact">
      <div class="loc">
        <form class="contactleft" action="#home">
          <label for="name">Name</label>
          <input type="text" id="name" name="name"></input>
          <label for="email">Email</label>
          <input type="email" id="email" name="email"></input>
          <label for="message">Message</label>
          <textarea id="message" name="message"></textarea>
        </form>
      </div>
    </div>
  </div>


</body>

The white space from the input

Answer 1

删除所有 inputs 和 #message

上的 border-radius: 10px;

:root {
  --primary-color: #252525;
  --secondary-color: #181818;
}


/*---------------------------------------------------------------------------------*/

body {
  margin: 0;
  padding: 0;
  background: #333333;
}


/*---------------------------------------------------------------------------------*/

a {
  text-decoration: none;
}

.right {
  display: flex;
  padding: 0;
  margin: 0;
  height: 100vh;
  width: border-box;
}

.right .contact {
  background: none;
  position: absolute;
  margin-top: 0;
}

.right .contact .loc {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0;
}

.right .contact .loc .contactleft {
  position: absolute;
  width: 765px;
  height: 600px;
  left: 115px;
  top: 0;
  background: var(--primary-color);
  box-shadow: 0px 0px 5px 5px var(--primary-color);
  border-radius: 20px;
}

.right .contact .loc .contactleft label {
  display: block;
  font-size: 40px;
  margin: 20px;
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  color: white;
  align-items: center;
}

.right .contact .loc .contactleft #name {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 35px;
  border: none;
  font-size: 20px;
  box-shadow: inset 0px 0px 5px 5px var(--secondary-color);
  background: white;
}

.right .contact .loc .contactleft #email {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 35px;
  border: none;
  font-size: 20px;
  box-shadow: inset 0px 0px 5px 5px var(--secondary-color);
  background: white;
}

.right .contact .loc .contactleft #message {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 150px;
  border: none;
  font-size: 20px;
  box-shadow: inset 0px 0px 5px 5px var(--secondary-color);
  background: white;
}

.right .contact .loc .contactleft .sendmessage {
  display: block;
}


/*---------------------------------------------------------------------------------*/

@keyframes yellow {
  0% {
    color: white;
    background: var(--primary-color);
    box-shadow: 0px 0px 5px 5px var(--primary-color);
  }
  50% {
    color: yellow;
    background: var(--secondary-color);
    box-shadow: 0px 0px 5px 5px var(--secondary-color);
  }
  100% {
    color: white;
    background: var(--primary-color);
    box-shadow: 0px 0px 5px 5px var(--primary-color);
  }
}


/*---------------------------------------------------------------------------------*/


/* Ensemble */

::-webkit-scrollbar {
  width: 10px;
}


/* Track */

::-webkit-scrollbar-track {
  background: #f1f1f1;
}


/* Handle */

::-webkit-scrollbar-thumb {
  background: #888;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}


/* Handle hover */

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

<!DOCTYPE html>
<html lang="en">


<head>
  <meta charaset="utf-8">
  <link rel="stylesheet" href="css/style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lo Re Baptiste</title>
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</head>


<body>

  <div class="right">
    <div id="contact" class="contact">
      <div class="loc">
        <form class="contactleft" action="#home">
          <label for="name">Name</label>
          <input type="text" id="name" name="name"></input>
          <label for="email">Email</label>
          <input type="email" id="email" name="email"></input>
          <label for="message">Message</label>
          <textarea id="message" name="message"></textarea>
        </form>
      </div>
    </div>
  </div>


</body>

插入阴影白色 space

inset shadow white space

html

css

forms