Question

我使用此链接How to set a border for an HTML div tag为div标签创建css边框。

＆＃13;

#box {
  border: 5px solid black;
}

＆＃13;

<div id="box">
  Sign in
</div>

＆＃13;

如果我只放border: 10px;甚至border-right: 5px solid black;，那么就没有边框了。为什么会这样？

Answer 1

border: 10px;无效，因为边框至少需要一种样式，因为没有默认样式，但默认颜色为黑色，因此您不需要颜色。所以以下内容将起作用

#box {
    border: 10px solid;
}

border-right: 5px solid black;与border-right: 5px solid;相同并且显示，只有div是块元素，因此占据容器的整个宽度（只需看右侧）页面）

现在，如果您希望边框直接位于文本旁边，则可以将块元素div转换为inline-block元素

#box {
    display: inline-block;
    border-right: 5px solid black;
}

您也可以单独设置每个边框属性

#box {
    border-width: 5px;
    border-style: solid;
    border-color: black;
}

或者像这样的一方

#box {
    border-right-width: 5px;
    border-right-style: solid;
    border-right-color: black;
}

Answer 2

在边界的引导程序4中，可以使用以下实用程序类。

以下是其中的列表：

您还可以创建自己的类，例如：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<style>
  .border-10 {
    border-width: 10px !important;
  }
  
  .border-20 {
    border-width: 20px !important;
  }
</style>

<h1>Bootstrap 4 Borders</h1>
<hr />

<div class="border border-dark border-10">
  Sign in
</div>
<br />
<div class="border-right border-primary border-20">
  Sign in
</div>

如何为div创建一个css边框

2 个答案: