html - 如何在css中实现这种边框效果？

Question

fiddle :
https://jsfiddle.net/aronlilland/bsmL1kx7/

现在我一直在努力寻找如何围绕 CSS 中的元素制作以下边框效果，特别是每个行元素之间的边框，如“signature serveice”。 “facebook 监视器”等。我可以通过将 div 行与下面的行间隔 1px appart 来实现这种外观吗？或者我怎样才能最好地做到这一点？在我看来，每个形状周围都有一个浅色边缘边框，简单的问题，简单的答案

谢谢!

    .table {
      background: #1e2129;
      width: 375px;
    }
    .row1 {
      width: 100%;
      line-height: 100px;
      background: #272a34;
      margin-bottom: 1px;
      text-align: center;
      color: #fff;
      font-family: helvetica;
    }
    .row2 {
      width: 100%;
      line-height: 100px;
      background: #313641;
      margin-bottom: 1px;
      text-align: center;
      color: #fff;
      font-family: helvetica;
    }

Answer 1

在我看来，它们只是顶部的边框较浅，底部的边框较深。没有什么花哨。颜色不完全匹配，但您明白了:

article {
  border-radius: 20px;
  background-color: #44ccff;
  color: white;
}

article header,
article section div {
  background-color: #445; 
}
article section div:nth-child(odd) {
  background-color: #333344;
}
article section div {
  border-top: 2px solid #556;
  border-bottom: 2px solid #223;
}

<article>
<h2>StarterPackage</h2>
<header>Here you can type...</header>
<section>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</section>
</article>