如何做胶囊形状div与分隔符如下附件？

Question

是否可以使用没有设定宽度或高度的边界半径制作胶囊形状并且包括在除渣器之间？

Answer 1

是的，你可以尝试这种方式

.container {
    width: 90%;
    padding:20px;
    margin: 10px auto;
    background:#000;
}
ul {
    list-style: none;
    padding: 7px;
    background: #333;
    border-radius: 12px;
    display: inline-flex;
}

li {
    padding: 0 10px;
    border-right: 1px solid #999;
    line-height: 1;
    color: #999;
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
}

li:last-child {
    border-right: none;
}

<div class="container">
    <ul>
      <li>abc</li>
      <li>def</li>
      <li>ghi</li>
    </ul>
</div>