防止CSS中出现“双边框”

假设我有两个相邻的div（以https://chrome.google.com/webstore/category/home为参考）并带有边框。

有没有办法（最好是CSS技巧）来防止我的div看起来像是带有双边框？看看这张图可以更好地理解我的意思：

您可以看到两个div相遇的地方，看起来好像有一个双边框。

#divNumberOne { border-right: 0; }

如果我们谈论的是不能保证以任何特定顺序出现的元素（可能是一行中有3个元素，然后是具有2个元素的行，依此类推），那么您希望可以将其放置在集合中的每个元素上。该解决方案应涵盖以下内容：

.collection {
    /* these styles are optional here, you might not need/want them */
    margin-top: -1px;
    margin-left: -1px;
}

.collection .child {
    outline: 1px solid; /* use instead of border */
    margin-top: 1px;
    margin-left: 1px;
}

请注意，大纲在较旧的浏览器（IE7和更早版本）中不起作用。

或者，您可以坚持使用边框并使用负边距：

.collection .child {
    margin-top: -1px;
    margin-left: -1px;
}

HTML：

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

CSS：

div {
    border: 1px solid #000;
    float: left;
}

div:nth-child(n+2) {
    margin-left: -1px;
}

演示版

包括支持IE8的ie9.js（对于所有CSS选择器/伪元素非常有用）。

人们可能会考虑的另一种解决方案是使用CSS Adjacent兄弟选择器。

CSS

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFiddle

您可以使用奇数选择器来实现

.child{
   width:50%;
   float:left;
   box-sizing:border-box;
   text-align:center;
   padding:10px;
   border:1px solid black;
   border-bottom:none;
}
.child:nth-child(odd){
   border-right:none;
}
.child:nth-last-child(2),
.child:nth-last-child(2) ~ .child{
   border-bottom:1px solid black
}

<div>
    <div class="child" >1</div>
    <div class="child" >2</div>
    <div class="child" >3</div>
    <div class="child" >4</div>
    <div class="child" >5</div>
    <div class="child" >6</div>
    <div class="child" >7</div>
    <div class="child" >8</div>
</div>

如果所有div具有相同的类名：

div.things {
    border: 1px solid black;
    border-left: none;
}

div.things:first-child {
    border-right: 1px solid black;
}

这里有一个JSFiddle演示。

我来晚了，但是尝试使用outline属性，如下所示：

.item {
  outline: 1px solid black;
}

CSS中的轮廓不会占用物理空间，因此会重叠以防止出现双边框。

将以下CSS添加到右侧的div中：

position: relative;
left: -1px; /* your border-width times -1 */

或者只是删除边框之一。

我只是用

border-collapse: collapse;

在父元素中

使用Flexbox，有必要添加另一个子容器，以使轮廓正确重叠。

<div class="grid__container">
    <div class="grid__item">
        <div class="grid__item-outline">
              <!-- content -->
        </div>
    </div>
</div>

SCSS

.grid__container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 1px 0 0; // margin-right 1px to give the correct width to the container
}

.grid__item {
    flex: 0 1 25%; // grid of 4
    margin: 0 0 1px; // margin-bottom to prevent double lines
}

.grid__item-outline {
    margin: 0 0 0 1px; // margin-left to prevent double lines
    outline: 1px solid #dedede;
}

  <div class="one"></div>
  <div class="two"></div>
  <div class="two"></div>
  <div class="two"></div>
  <div class="two"></div>

CSS：

  .one{
    width:100px;
    height:100px;
    border:thin red solid;
    float:left;
  }
.two{
    width:100px;
    height:100px;
    border-style: solid solid solid none;

    border-color:red;
    border-width:1px;
    float:left;
}

的jsfiddle

我的用例是单行中的框，在那里我知道最后一个元素是什么。

.boxes {
  border: solid 1px black  // this could be whatever border you need
  border-right: none;
}

.furthest-right-box {
  border-right: solid 1px black !important;
}

我知道这是一个迟来的反应，但是我只是想丢掉我的2美分的价值，因为我的做法不在这里。

您知道，我真的不喜欢边际收益，尤其是负边际收益。每种浏览器似乎都可以处理这些问题，并且在很多情况下很容易影响利润率。

我要确保我的div有一个漂亮的表，我的方法是先创建一个好的html结构，然后再应用css。

我如何做的例子：

 <div class="tableWrap">
   <div class="tableRow tableHeaders">
     <div class="tableCell first">header1</div>
     <div class="tableCell">header2</div>
     <div class="tableCell">header3</div>
     <div class="tableCell last">header4</div>
   </div>
   <div class="tableRow">
     <div class="tableCell first">stuff</div>
     <div class="tableCell">stuff</div>
     <div class="tableCell">stuff</div>
     <div class="tableCell last">stuff</div>
   </div>
</div>

现在，对于css，我仅使用行结构来确保边框仅在需要的位置，不会产生任何边距。

.tableWrap {
  display: table;
  }

.tableRow {
  display: table-row;
  }

.tableWrap .tableRow:first-child .tableCell {
  border-top: 1px solid #777777;
  }

.tableCell {
  display: table-cell;
  border: 1px solid #777777;
  border-left: 0;
  border-top: 0;
  padding: 5px;
  }

.tableRow .tableCell:first-child {
  border-left: 1px solid #777777;
  }

等等，完美的餐桌。现在，很明显，这将导致您的DIV的宽度有1px的差异（特别是第一个），但是对我而言，这从来没有产生任何形式的问题。如果您的情况如此，那么我想您会更加依赖利润率。

我可以使用以下代码实现它：

td.highlight {
    outline: 1px solid yellow !important;
    box-shadow: inset 0px 0px 0px 3px yellow;
    border-bottom: 1px solid transparent !important;
}

这是一个非常古老的问题，但这是第一个Google搜索结果，因此对于遇到此问题且不想让媒体查询将边框重新添加到移动设备等元素的右侧/左侧的任何人。

我使用的解决方案是：

.element {
    border: 1px solid black;
    box-shadow: 0 0 0 1px black;
}

之所以可行，是因为在由边框和阴影组成的元素周围会看到2px的边框。但是，在元素相遇的地方，阴影重叠，使阴影保持2px宽；

margin:1px;围绕div怎么样？

<html>
<style>
.brd{width:100px;height:100px;background:#c0c0c0;border:1px solid red;float:left;margin:1px;}
</style>
<body>
    <div class="brd"></div>
    <div class="brd"></div>
    <div class="brd"></div>
</body>
</html>

演示

我更喜欢在它们后面使用另一个div作为背景并删除所有边框。您只需要计算背景div的大小和前景div的位置即可。