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

通过添加margin-bottom

来实现这一目标

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

div的css边框样式

4 个答案: