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;
   }