div的CSS边框样式

Question

我有一个带有右边界和底边界的div，但是由于给定的html样式，在向右应用边界颜色时，它看起来不完整（有点破损）。 是否有任何CSS技巧或任何替代方法都可以很好地覆盖右边界？

.tb{
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
width:70px;
height:18px;
zoom:250%;
}
.bd{
border-right-color:red;   
}

<div>
<div style="float: left;"> 
    <div class="tb"> </div>
    <div class="tb bd"> </div>
    <div class="tb bd"> </div>
    <div class="tb bd"> </div>
    <div class="tb bd"> </div>
    <div class="tb"> </div>
    <div class="tb"> </div>
</div>
<div style="float: left;"> 
    <div class="tb"> </div>
    <div class="tb bd"> </div>
    <div class="tb bd"> </div>
    <div class="tb bd"> </div>
    <div class="tb bd"> </div>
    <div class="tb"> </div>     
    <div class="tb"> </div>
</div>
</div>

检查以下链接，

http://jsfiddle.net/gq7dc4rd/2/

Answer 1

尝试将margin-bottom：-1px添加到.bd。但这不是最好的做法，但应该有所帮助。

.bd {
  margin-bottom:-1px;
}

http://jsfiddle.net/uoo5utbv/

Answer 2

这只是大多数浏览器呈现边框的方式。 您可以像在示例中使用::after一样使用假边框来解决此问题： http : //jsfiddle.net/maryisdead/mtwcee03/

 .tb{ border-bottom:1px solid #ccc; width:70px; height:18px; zoom:250%; position: relative; padding-right:1px; } .tb::after{ background:#ccc; content:''; position:absolute; height:100%; right:0; top:0; width:1px; } .bd::after{ background:red; } 

 <p style="font:12px lucida grande"> <b>Note:</b> I have a div with right and bottom borders, but while applying the border color to right it looks incomplete(kind of breakage) because of the given html style, Is there any css trick or any work around to override the right border will stretch across in a nice way? </p> <div> <div style="float: left;"> <div class="tb"> </div> <div class="tb bd"> </div> <div class="tb bd"> </div> <div class="tb bd"> </div> <div class="tb bd"> </div> <div class="tb"> </div> <div class="tb"> </div> </div> <div style="float: left;"> <div class="tb"> </div> <div class="tb bd"> </div> <div class="tb bd"> </div> <div class="tb bd"> </div> <div class="tb bd"> </div> <div class="tb"> </div> <div class="tb"> </div> </div> </div> 

Answer 3

如果您希望有正确的边界以“以一种不错的方式流动”，则可以将一个类应用于包含的divs如下所示：

HTML

<p style="font:12px lucida grande">
    <b>Note:</b> I have a div with right and bottom borders, but while applying the border color to right it looks incomplete(kind of breakage) because of the given html style, Is there any css trick or any work around to override the right border will stretch across in a nice way?
</p>
<div>
    <div class="border" style="float: left;"> 
        <div class="tb"> </div>
        <div class="tb bd"> </div>
        <div class="tb bd"> </div>
        <div class="tb bd"> </div>
        <div class="tb bd"> </div>
        <div class="tb"> </div>
        <div class="tb"> </div>
    </div>
    <div class="border" style="float: left;"> 
        <div class="tb"> </div>
        <div class="tb bd"> </div>
        <div class="tb bd"> </div>
        <div class="tb bd"> </div>
        <div class="tb bd"> </div>
        <div class="tb"> </div>     
        <div class="tb"> </div>
    </div>
</div>

CSS

.tb{

    border-bottom:1px solid #ccc;
    width:70px;
    height:18px;
    zoom:250%;
}

.border{
    border-right:1px solid red;
    }   

检查新的DEMO 。

Answer 4

一种通过在底部添加边距来做到这一点的方法

     .bd 
   {
      margin-bottom:-1px;
   }