Как сделать так, чтобы окно вокруг содержимого не отображалось?

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

Если я правильно понял ваш вопрос, следуйте ниже css:

.box{
width: 100%;
height:100%;
border: 2px solid black;
background:white;

}

Answer 2

Вы можете использовать этот способ css

.white-box {
background: #fff;
border-radius: 15px;
padding: 0 0 35px 0;
box-shadow: rgba(0,0,0,0.1) 0 4px 5px;
border: #eee solid 1px;
height: 100%;

Answer 3

Причина, по которой вы не можете видеть границу даже после применения класса .box, заключается в том, что вы не объявили border-style . Таким образом, принимается значение по умолчанию none , которое не указывает границы.

Согласно синтаксису свойства Border он принимает одно или несколько из следующих значений в комбинации:

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

И вы указали border-width и color без border-style для свойства border, что делает свойство .box class border следующим образом: border:2px black none.

Итак, измените класс .box с этого:

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

На это:

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

И вы сможете увидеть границу.