c# - 如何修复不显示内容周围的框？

Question

我试图将多个东西包装在一个盒子中，即登录功能。但是，当我尝试将内容放在它自己的内容中时，但即使在编辑 css 之后，实际更改也不会显示

我已经尝试了 .boxed 方法和 .box + .white(用于背景)方法。两者都没有表现出任何差异

<div class="form-horizontal">
        <div class="box white">
            <h4>tbl_Gebruiker</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

            <div class="form-group">
                @Html.LabelFor(model => model.gebruikersnaam, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.gebruikersnaam, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.gebruikersnaam, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.wachtwoord, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.wachtwoord, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.wachtwoord, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
    </div>

对于 CSS:

.box {
      width: 800px;
      height: 500px;
      border: 2px black;
  }
  .white {
      background: white;
  }

我希望发生的是登录功能被包裹在一个带有黑色边框的白框中。发生的事情很好，没有。

Answer 1

即使在应用 .box 类后仍看不到边框的原因是您尚未声明 border-style。 .因此，采用指定无边框的默认值 none。

根据 Border 属性语法，它接受以下一个或多个值的组合:

border:  <border-width> || <border-style> || <color>

而您指定的是 border-width 和 color 没有 border-style 的边框属性，这使得 .box 类 border 属性为:border:2px black none。

因此，将 .box 类更改为:

.box {
  width: 800px;
  height: 500px;
  border: 2px black;
}

对此:

.box {
  width: 800px;
  height: 500px;
  border: 2px solid black;
}

你将能够看到边界。