div：折叠边框+更改悬停边框颜色+边框半径？

Question

这种缝很容易，但我还没有找到任何办法。我有3个div（但解决方案必须适用于n个div），如下图所示：

| div 1 || div 2 || div 3 |

例如：

我想要像这样的普通div：

在悬停特定div时，我希望此div的所有边框都有另一种颜色：

最后，我无法做到的，我想在这里展示角落：

我想首先崩溃所有边界。边界崩溃容易：崩溃。但我想在悬停时更改完整单元格的边框颜色（顶部+左侧+底部+右侧边框）。边框也很容易：1px DOUBLE＃000。但是最后（我在这一点上阻止）我还希望在div 1的顶部和左下角以及div 3的顶部和右下角有一个圆角

看起来像边界崩溃的那样：崩溃他们无法拥有圆角......所以需要找到另一种解决方案

编辑：我尝试相对位置和z-index，它的工作好一点！但是我需要知道如何将左边的第二个div移动1px，左边的第3个div移动2个像素，...并且左边的n div乘以n-1像素？

Answer 1

实际上这比你想象的要复杂一点。

border-collapse适用于不适用于所有块元素的表。当然你仍然可以使用display：table / table-cell。 但悬停仍然存在缺陷，因为折叠的边框将属于第一个元素 - 如果你悬停第二个或第三个元素，左边框将不会发生变化。

只有这样，折叠边框的边界半径才会发挥作用。

我说你必须采取不同的方法。我可能会选择内联块（或者更确切地说是＃34;老派＆＃34;花车以避免空白问题）元素，边框重叠1px，并且：hover中的z-index更改将悬停的元素置于顶部并确保其边框是显示的边框。

Answer 2

不是很清楚你想要什么，只是想尝试

＆＃13;

＆＃13;

.one {
    width: 80px;
    height: 40px;
    display: table-cell;
    border-collapse: collapse;
    border: double 1px black;
}
.one:first-child {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
.one:last-child {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是你想要的吗？

＆＃13;

＆＃13;

.container {
  display: table;
}
.container > div {
  display: table-cell;
  width: 80px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  border-top: solid 1px gray;
  border-bottom: solid 1px gray;
  border-left: solid 1px gray;
}
.container > div:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.container > div:last-child {
  border-right: solid 1px gray;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.container > div:hover {
  background-color: lightgray;
  border-color: red;
  border-right: solid 1px red;
}

＆＃13;

<div class='container'>
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

这是解决这两个问题的解决方案：

• 回到外面。这使用first-of-type和last-of-type以及border-radius属性。
• 重叠边界。

对于后者，不是使用z-indices，而是创建右边框并更改颜色。然后，下一个li的左侧边框被消隐。使用相邻的兄弟选择器（li）完成下一个+的消隐。

这是一个Codepen：http://codepen.io/anon/pen/JoyGxJ