Question

这是我的问题：

我只需要第一个和最后一个元素的圆形边框？我怎么能做到这一点？

这是我的css：

 .root {
      display: flex;
      width: 100%;
      height: 56px;
      align-items: center;
      border-radius: var(--radius-medium)px;
      border: 1px solid var(--color-gray2);
    }

    .icon {
      display: flex;
      align-items: center;
      padding: 0 15px;
    }

    .text {
      color: #000;
      font-size: calc(var(--font-size-body) / 10)rem;
    }

这是来自React：

//<ListElementRoot> === .root
//<ListElementIcon> === .icon
//<ListElementText> === .text



  return (
    <ListElementRoot>
      <ListElementIcon>
        <Icon name={icon} color={color} />
      </ListElementIcon>
      <ListElementText>
        {children}
      </ListElementText>
    </ListElementRoot>
  )
}

就是这样，我知道我应该用第一个和最后一个元素做点什么，但是在我的情况下如何做呢？有什么想法吗？

边框由root生成...

Answer 1

我想你的意思是第一个和最后一个应该在内侧仍然有非圆形边缘：

＆＃13;

.root {
  width: 200px;
  height: 80px;
  border: 1px solid black;
}

.root:first-of-type {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.root:last-of-type {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

＆＃13;

<div>
  <div class="root">1
  </div>
  <div class="root">2
  </div>
  <div class="root">3
  </div>
  <div class="root">4
  </div>
</div>

＆＃13;

Answer 2

您可以使用:first-child和:last-child：

.root { /* all .root */
    display: flex;
    width: 100%;
    height: 56px;
    align-items: center;
    border: 1px solid var(--color-gray2);
}
.root:first-child, .root:last-child { /* first or last .root only */
    border-radius: var(--radius-medium)px;
}

边界半径仅适用于第一个和最后一个孩子

2 个答案: