Question

只有当我使用完整的边界声明时才能正常工作。不工作：

border-color: red;

工作：

border: 1px solid red;

代码示例：

＆＃13;

/* Styles go here */

.example1 {
  border-color: red; /* not good */
}

.example2 {
  border: 1px solid red; /* works well */
}

＆＃13;

 <input class="example1">
  <br>
  <br>
  <input class="example2">

＆＃13;

Answer 1

为了以这种方式使用border-color，您需要设置宽度和样式：

border-color: red;
border-style: solid;
border-width: 15px;

或者，您可以设置border: 1px solid blue;然后使用border-color: red;覆盖颜色。这是有效的，但这只是因为已经设置了wodth和style。

Answer 2

如果您不提供其他边框属性，则浏览器的用户代理样式表中的样式将应用于该元素。

在您的第一个示例中，如果您在开发人员工具中检查它，它将显示继承的border-style:inset。

Answer 3

当你写border:时，它是所有边框样式的速记属性。所以当你写border: 1px solid red时，它变为：

.example2 {
  border: 1px solid red;/* Becomes: */
  border-width: 1px;
  border-style: solid;
  border-color: red;
}

但是，当您只指定颜色时，浏览器不知道输入应该具有哪些其他样式，因此它使用默认颜色。

.example1 {
  border-width: /* Uses default */
  border-style: /* Uses default */
  border-color: red;
}

有几种方法可以让您更轻松地自定义输入框。您可以选择所有输入类型并使它们具有常规边框，但随后指定使用更具体样式的类。

input[type=text] {
  border: 1px solid red;
}

input.red-border {
  border-color: red;
}

input.blue-border {
  border-color: blue;
}

<input type="text" class="red-border" value="I am Red"></input>
<input type="text" class="blue-border" value="I am Blue"></input>

但是，我不确定这是否回答了你的问题，因为好像两个输入都有一个红色边框。尝试使用一些更详细的实例来更好地格式化您的问题。

希望这有帮助！