如何使用CSS去掉一个盒子的底部边框

Question

我有一个类似上面的矩形 div。我想在我的 div 中删除底部边框（从 C 到 D）。我该如何做？

编辑：这是我的 CSS：

#index-03 {
  position: absolute;
  border: .1px solid #900;
  border-width: .1px;
  border-style: solid;
  border-color: #900;
  left: 0px;
  top: 102px;
  width: 900px;
  height: 27px;
}

<div id="index-03" 
     style="background-color:limegreen; width:300px; height:75px;">
</div>

- Gandalf

---

你是指将其省略吗？从哪里开始省略？你的代码在哪里？ - Oded

我已经给我的 div 添加了 1px 的边框。我想在 C-D 的长度上去掉这个 1px 边框。 - Gandalf

你需要使用border-bottom:none。 - Evan Mulawski

不要使用不能被表示的分数值像素大小.1px，而应该使用整数值作为px值。 - Gabriele Petrioli

Answer 1

只需添加：border-bottom: none;

#index-03 {
    position:absolute;
    border: .1px solid #900;
    border-bottom: none;
    left:0px;
    top:102px;
    width:900px;
    height:27px;
}

- DaiYoukai

---

以下是W3C规范中定义的边框属性，供读者日后参考：http://www.w3.org/TR/CSS2/box.html#border-properties - Gabriele Petrioli

专业提示：顺序很重要。如果您在设置border: .1px solid # 900;之前尝试设置border-bottom: none;，那么它将不起作用。 - Levi Fuller

@LeviFuller 谢谢，你帮我省了很多时间！ - Germain

有没有可能使 div 元素底部的几个像素不可见？ - vishnu

Answer 2

你可以设置

border-bottom: none;

或者

border-bottom: 0;

将 border-style 设为 none。
将 border-width 设为 0px。

div {
  border: 3px solid #900;

  background-color: limegreen; 
  width:  28vw;
  height: 10vw;
  margin:  1vw;
  text-align: center;
  float: left;
}

.stylenone {
  border-bottom: none;
}
.widthzero {
  border-bottom: 0;
}

<div>
(full border)
</div>
<div class="stylenone">
(style)<br><br>

border-bottom: none;
</div>
<div class="widthzero">
(width)<br><br>
border-bottom: 0;
</div>

小提示：
如果你发现边框没有显示出来，而你却想要它显示出来，那么可能是下面两种情况之一造成的。 还要确保 border-color 不与 background-color 相同。

- SherylHohman

Answer 3

您好，以下是您需要翻译的内容：

您好像误解了盒模型——在CSS中，您只需要提供上下左右的位置和宽度高度，就可以精确地放置一个盒子。

width属性既代表了C-D，也代表了A-B。如果您省略了它，那么这个div将没有定义的宽度，其宽度将由其内容决定。

---

根据问题评论更新：

在您的CSS中添加border-bottom-style: none;，以仅从底部删除此样式。

谢谢！

- Oded

---

如果您有一分钟的时间，我想让您看一下yahoo.com。在底部，您会发现'MARKETPLACE' div。您认为他们是如何制作的？ - Gandalf

这只是一个带有实线边框的DIV。该DIV也是另外三个DIV的容器。 - Evan Mulawski

链接已损坏。 - SherylHohman

Answer 4

你可以将宽度设置为自动。如果 div 没有内容，则其宽度将等于 0。

width:auto;

- DADU