html - CSS 限制边框大小

Question

我的目标是在每个字段的下方和右侧有一个边框，以将它们分开并使其与我网站的其余部分相匹配。我试过弄乱填充和边距，但这搞砸了居中。我的目标是在每个字段的下方和右侧有一个边框以将它们分开并使其与我网站的其余部分相匹配

附言。我在 rials 上使用 ruby​​，并在安装了 bootstrap 的登录页面上使用 devise gem，如果这会影响任何东西的话

<center>
  <div class = "jumbotron-main">
    <center>
      <h2>Log In</h2>

      <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
        <div class="field" "box">
          <%= f.label :email %><br />
          <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
        </div>

        <div class="field" "box">
          <%= f.label :password %><br />
          <%= f.password_field :password, autocomplete: "off" %>
        </div>

        <% if devise_mapping.rememberable? -%>
          <div class="field">
            <%= f.check_box :remember_me %>
            <%= f.label :remember_me %>
          </div>
        <% end -%>
        <div class="jumbotron jumbotron-bg-danger">
          <div class="actions">
            <%= f.submit "Log in" %>
          </div>
        <% end %>

        <%= render "devise/shared/links" %>
      </div>
    </center>
  </div>
</center>

<style>
  h2{
    margin-top: 4%;
    padding-top: 12px;
  }

  .field{
    border-bottom: solid 2px black;
  }

  .jumbotron-main{
    margin-top: 5%;
    background-color: #4F4F4F;
    width: 60%;
    color: black;
    height: 80% !important;
  }

  .jumbotron{
    margin-top: 10%;
    background-color: #EB5757;
    width: 400px;
    color: black;
    position: relative;
    padding-top: 5px;
    padding-left: 25px;
    padding-right: 25px;
    border-radius: 0px !important;
  }

  #user_username{
  background-color: #999999;
  border-style: solid;
  border-width: 1px;
  border-color: black;
}

  #user_email{
  background-color: #999999;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  margin-bottom: 20px;
}
  #user_password{
  background-color: #999999;
  border-style: solid;
  border-width: 1px;
  border-color: black;
}

  #user_password_confirmation{
  background-color: #999999;
  border-style: solid;
  border-width: 1px;
  border-color: black;
}
</style>

Answer 1

为什么不使用 border-right 和 border-bottom？

HTML:

<div id="sample">

</div>

CSS:

#sample{
  height: 250px;
  border: 2px solid;
  border-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 1) 100%);
  border-image-slice: 1;
  padding-top:50px;
}