Question

我的目标是在每个字段的下方和右侧放置一个边框，将它们分开，使其与我网站的其余部分相匹配。我已经尝试弄乱填充和边距，但是拧紧了定心。我的目标是在每个字段的下方和右侧有一个边框，以将它们分开并使其与我网站的其余部分相匹配

PS。我在里亚尔上使用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;
}

CSS限制边框大小

1 个答案: