防止"；“双”字；CSS中的边框_Css

防止"；“双”字；CSS中的边框

css

防止"；“双”字；CSS中的边框,css,Css,假设我有两个相邻的带边框的div（作为参考）有没有一种方法（最好是CSS技巧）可以防止我的div看起来像有双边框？看看这张图片，更好地理解我的意思：您可以看到，在两个div相交的地方，看起来它们有一个双边框。#divNumberOne{border right:0；}将以下CSS添加到右侧的div中： position: relative; left: -1px; /* your border-width times -1 */ 或者只删除其中一个边框。HTML: <div>

假设我有两个相邻的带边框的div（作为参考）

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

您可以看到，在两个div相交的地方，看起来它们有一个双边框。

#divNumberOne{border right:0；}

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

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

或者只删除其中一个边框。

HTML:

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

包括IE8支持（这对所有CSS选择器/伪元素都非常有用）。

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

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

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

这里有一个电话

给一个

边距：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>


.brd{宽度：100px；高度：100px；背景：#c0c0；边框：1px实心红色；浮动：左侧；边距：1px；}

我更喜欢使用它们后面的另一个div作为背景并删除所有边框。您只需要计算背景div的大小和前景div的位置
 如果我们谈论的元素不能保证以任何特定顺序出现（可能一行中有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;
}

另一个可以考虑的解决方案是使用CSS。< /P>
CSS
div{
边框：1px纯黑；
}
div+div{
左边框：0；
}

我只是用
border-collapse: collapse;

在父元素
中，我的用例是针对一行中的框，我知道最后一个元素是什么
.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美分的价值，因为我这样做的方式不在这里
你看，我真的不喜欢玩保证金游戏，尤其是负保证金。每个浏览器似乎都在处理这些问题，只是略有不同，而且页边很容易受到大量情况的影响
我的方法是先创建一个好的html结构，然后应用css，以确保我有一个很好的带有div的表
我如何做到这一点的示例：
 <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>

瞧，一张完美的桌子。
现在，很明显，这会导致你的div在宽度上有1px的差异（特别是第一个），但对我来说，这从来没有造成任何类型的问题。如果在你的情况下是这样，我想你会更依赖于利润。
你可以使用奇数选择器来实现这一点

.child{
宽度：50%；
浮动：左；
框大小：边框框；
文本对齐：居中；
填充：10px；
边框：1px纯黑；
边框底部：无；
}
.儿童：第n个儿童（单数）{
边界权：无；
}
.子女：第n个子女（2），
.child:n最后一个孩子（2）~.child{
边框底部：1px纯黑
}

1.
2.
3.
4.
5.
6.
7.
8.
使用Flexbox，有必要添加第二个子容器，以正确地使轮廓彼此重叠
<div class="grid__container">
    <div class="grid__item">
        <div class="grid__item-outline">
              <!-- content -->
        </div>
    </div>
</div>

我来晚了，但请尝试使用outline属性，如下所示：
.item {
  outline: 1px solid black;
}

CSS中的轮廓不会占用物理空间，因此会重叠以防止出现双边框。
我可以使用以下代码实现它：
td.highlight {
    outline: 1px solid yellow !important;
    box-shadow: inset 0px 0px 0px 3px yellow;
    border-bottom: 1px solid transparent !important;
}

这是一个非常古老的问题，但这是谷歌的第一个结果，因此对于任何遇到这个问题并且不想让媒体查询在手机上的元素的右/左重新添加边框的人来说，等等
我使用的解决方案是：
.element {
    border: 1px solid black;
    box-shadow: 0 0 0 1px black;
}

这是因为您将在由边框和阴影组成的元素周围看到2px边框。然而，在元素相遇的地方，阴影重叠，使其保持2px宽
 如果您还需要在交互中更改边框颜色（例如表单中的样例选择器），我发现了一个很好的方法，使用负边距、填充调整和变换平移的组合。请查看：

.parent{
显示器：flex；
宽度：100%；
最大宽度：375px；
左边距：1px；
}
.孩子{
左边距：-1px；/*在其同级后面隐藏双边框*/
弹性：10自动；
}
.儿童输入{
显示：无
}
.儿童标签{
显示：块；
边框：1px实心#eaeaea；
最小高度：45px；
线高：45px；
光标：指针；
填充：0 10px；/*将在检查输入时更改*/
字体大小：15px；
文本对齐：居中；
}
.子输入：选中+标签{
边框：1px纯红；
转换：translateX（-1px）；
左侧填充：11px；
右侧填充：9px；
背景色：#fafafa；
}

要素1
要素2
要素3
不，我正在使用同位素，因此无法使用表格。div有不同的大小，这只是你左右的一个问题，还是你也需要从上到下担心它？我希望CSS中有更好的解决方案-（这是唯一一种不会弄乱其他东西的真正方法。如果你需要做多个元素，比如说100个div，你可以做div{border right:none；}div:last child{border right:1px solid black；}这会给你预期的效果是的，它总是可以这样做的，但我想知道是否有一个纯css的方式来做它，而不必使用多个类（我将有更多的行和列）这是纯css，我使用了一个伪类（最后一个孩子）所以我没有修改html，反正有很多伪类，我会说沿着这条路线走，因为我不认为有一个替代的方法来研究第n个孩子，你可以用奇数和偶数，或者根据你的布局，你可以用你想要的方式来计算。为什么这被认为是正确的答案？我真的不认为这是正确的这当然不是一个可扩展的解决方案。如果在s中有多行第一个div
.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;
}

.item {
  outline: 1px solid black;
}

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

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