主页 / 问题 / 676901
Accepted
humster_spb
Asked:2020-06-08 20:14:51 +0000 UTC2020-06-08 20:14:51 +0000 UTC

如何使用 border-radius 为多个块制作单个边框

  • 772

我正在尝试以蛇的形式为几个相邻的块制作一个边框。如果角落是正确的，那么一切都会很简单。但是角必须是圆的。我试着这样做：

div {
  width: 190px;
  height: 200px;
  border: 2px dashed gray;
  border-top: none;
}

div:nth-of-type(1) {
  border-right: none;
  border-radius: 0 0 0 15px;
}

div:nth-of-type(2) {
  border-left: none;
  border-radius: 0 15px 15px 0;
  margin-left: 10px;
}

div:nth-of-type(3) {
  border-right: none;
  border-radius: 15px 0 0 15px;
}

div:nth-of-type(4) {
  border-left: none;
  border-radius: 0 15px 15px 0;
  margin-left: 10px;
}
<div></div>
<div></div>
<div></div>
<div></div>

但是在某些角落，接缝清晰可见:(有什么办法可以解决这个问题吗？或者这个问题可能有另一种解决方案？

html

1 个回答

  1. Best Answer

    UPD：overflow:hidden;来救援

    事实证明，不透明的背景不适合问题的条件。然后我们将每个块包装在另一个块中，并为包装器提供属性overflow:hidden;。负的上边距会将顶部边框推出包装器，而包装器会将其隐藏。

    .snake-border > div {
  overflow: hidden;
}

.snake-border > div > div {          /* 6. */
  width: 190px;
  height: 200px;
  border: 2px dashed gray;
  margin-top: -2px;                  /* 2. */
}

.snake-border > div:nth-of-type(1) > div {
  border-right: none;
  border-top: none;                  /* 1. */
  border-radius: 0 0 0 15px;
}

.snake-border > div:nth-of-type(2n+2) > div {
  border-left: none;
  border-radius: 0 15px 15px 0;
  margin-left: 15px;                 /* 4. */
}

.snake-border > div:nth-of-type(2n+3) > div {
  border-right: none;
  border-radius: 15px 0 0 15px;
}

.snake-border > div:last-of-type > div {  /* 5. */
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
    <div class="snake-border">
  <div><div></div></div>
  <div><div></div></div>
  <div><div></div></div>
  <div><div></div></div>
  <div><div></div></div>
  <div><div></div></div>
</div>

    白色背景做脏活

    1. 让我们只在第一个块隐藏上边框。其余的不需要这样做，否则块角处的一部分圆角会消失。
    2. 让我们将块提高边界的宽度，以便在每对块中，下邻居的上边界与上邻居的下边界重叠。
    3. 为了让其中一个重叠边界仍然不可见，我们将为块分配一个不透明的背景。（默认background-clip为border-box，背景在边框下爬行。）
    4. 您可以使用左缩进，以便虚线在块之间的过渡处更成功地断开。
    5. 你可以让最后一个块的边框垂直向下，就像它从第一个块开始一样。
    6. 我们将所有内容都放在类的块中，否则即使是代码片段也会将服务块添加到布局中。

    .snake-border > div {                /* 6. */
  width: 190px;
  height: 200px;
  border: 2px dashed gray;
  margin-top: -2px;                  /* 2. */
  background: white;                 /* 3. */
}

.snake-border > div:nth-of-type(1) {
  border-right: none;
  border-top: none;                  /* 1. */
  border-radius: 0 0 0 15px;
}

.snake-border > div:nth-of-type(2n+2) {
  border-left: none;
  border-radius: 0 15px 15px 0;
  margin-left: 15px;                 /* 4. */
}

.snake-border > div:nth-of-type(2n+3) {
  border-right: none;
  border-radius: 15px 0 0 15px;
}

.snake-border > div:last-of-type {   /* 5. */
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
    <div class="snake-border">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

    • 5

相关问题