如何使用 CSS 删除框的底部边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4114552/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove the bottom border of a box with CSS
提问by Gandalf
I have a rectangular div, like the one above. I want to remove the bottom border (from C to D) in my div. How can I do this?.
我有一个矩形div，就像上面的那个。我想在我的div. 我怎样才能做到这一点？。
Edit: Here is my CSS:
编辑：这是我的 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>回答by DaiYoukai
Just add in: border-bottom: none;
只需添加： border-bottom: none;
#index-03 {
position:absolute;
border: .1px solid #900;
border-bottom: none;
left:0px;
top:102px;
width:900px;
height:27px;
}
回答by Oded
You seem to misunderstand the box model - in CSS you provide points for the top and left and then width and height - these are all that are needed for a box to be placed with exact measurements.
您似乎误解了盒子模型 - 在 CSS 中，您提供顶部和左侧的点，然后是宽度和高度 - 这些都是放置具有精确测量值的盒子所需的全部内容。
The widthproperty is what your C-Dis, but it is also what A-Bis. If you omit it, the div will not have a defined width and the width will be defined by its contents.
该width物业是你的东西C-D是，但它也什么A-B是。如果省略它，div 将没有定义的宽度，宽度将由其内容定义。
Update (following the comments on the question:
更新（遵循对问题的评论：
Add a border-bottom-style: none;to your CSS to remove this style from the bottom only.
将 a 添加border-bottom-style: none;到您的 CSS 以仅从底部删除此样式。
回答by SherylHohman
You can either set
您可以设置
border-bottom: none;
or
或者
border-bottom: 0;
One sets the border-styleto none.
One sets the border-widthto 0px.
一个设置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>Side Note:
If you ever have to track down why a border is not showing when you expect it to,
It is also good to know that either of these could be the culprit.
Also verify the border-coloris not the same as the background-color.
旁注：
如果您不得不追查为什么边框没有在您期望的时候显示，那么知道这些中的任何一个都可能是罪魁祸首也是很好的。还要验证border-color与background-color.
回答by DADU
You could just set the width to auto. Then the width of the div will equal 0 if it has no content.
您可以将宽度设置为自动。如果没有内容，则 div 的宽度将等于 0。
width:auto;
