边框半径创建黑色

Question

我正在创建一个注册页面，其中有 3 个输入字段。应用边框半径后，黑色边框 会在输入周围创建，而我 没有将边框颜色应用到黑色 。 border-collapse 属性 / border-color 是问题吗？

应用边框样式后：none

所以最初的样子是这样的：-

应用边界半径后，

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

.title {
  margin-top: 5%;
}

form {
  margin-top: 10%;
}

.field {
  display: block;
  margin: 0 auto;
  height: 38px;
  width: 20%;
  border-radius: 10px;
}

.email {
  border-radius: initial;
}

.top {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.password {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.bottom {
  margin-top: 10px;
  border: 0;
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <h2 class="title">Daily Newsletters Mail Service</h2>
  <form action="" method="post">
    <h2>Sign-In</h2>
    <input class="field top" type="text" name="username" autofocus="true">
    <input class="field email" type="email" name="email" placeholder="xyz@email.com">
    <input class="field password" type="password" name="password" placeholder="Yx73@ysd">
    <input class="field bottom" type="submit" name="signup" value="Sign-Up">
  </form>
</body>

</html>

Answer 1

长话短说；博士。设置您想要的边框颜色以覆盖默认值

浏览器对每个 HTML 元素（例如颜色、宽度、边距等）都有特定的默认样式值。因为您定义了 border 样式集的一部分（例如 border-radius）而不是 all ，所以浏览器仅使用其默认值。本例中，边框颜色为黑色。

您可以只指定您喜欢的边框颜色和样式。请参阅下面的代码片段，其中我向 input 元素添加了 border 样式。

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

.title {
  margin-top: 5%;
}

form {
  margin-top: 10%;
}

.field {
  display: block;
  margin: 0 auto;
  height: 38px;
  width: 20%;
  border-radius: 10px;
}

input {
  /* Set your intended border color here */ 
  border: 1px solid #ddd;
}
.email {
  border-radius: initial;
}

.top {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.password {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.bottom {
  margin-top: 10px;
  border: 0;
}

<h2 class="title">Daily Newsletters Mail Service</h2>
<form action="" method="post">
  <h2>Sign-In</h2>
  <input class="field top" type="text" name="username" autofocus="true">
  <input class="field email" type="email" name="email" placeholder="xyz@email.com">
  <input class="field password" type="password" name="password" placeholder="Yx73@ysd">
  <input class="field bottom" type="submit" name="signup" value="Sign-Up">
</form>

Answer 2

为输入添加样式：

input { border:none; } 将完全摆脱它们

或 input { border:1px red solid } 会给每个人一个红色边框。

Answer 3

Refer Here

如参考文献所述，chrome 在默认设置中，border-style:inset;。
这不会在第一张照片（没有 border-radius）上触发，因为您没有包含任何 border-related 样式来输入，就像您没有使用 border/border-radius/border-color/border-width/border-style,
但是在你使用 border-radius,
的第二张照片上 border-colour 和 border-style:inset; 等其他样式已触发。
您可以通过添加 border-style:solid;

来解决这个问题

例子

#nobordered {
  height: 38px;
}

#bordered {
  height: 38px;
  border-style: solid;/*main*/
  border-radius: 10px;/*your need*/
  border-width: thin;/*replicating*/
}

<input id="nobordered" type="text" placeholder="without border radius">
<input id="bordered" type="text" placeholder="with border radius">

为什么这样更好：
这样更好，因为您不需要设置边框颜色，它会设置其默认边框颜色

边框半径创建黑色

border radius creating a black color

html

css

frontend

长话短说；博士。设置您想要的边框颜色以覆盖默认值

Refer Here

例子