Question

小提琴：
https://jsfiddle.net/aronlilland/bsmL1kx7/

对于许多卫星现在我一直试图找出如何围绕CSS中的元素进行以下边界效果，特别是每个行项目之间的边界，如“signature serveice”。 “facebook monitor”等可以通过将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

在我看来，他们只是在顶部有一个较浅的边框，在底部有一个较暗的边框。没有什么花哨。没有完全匹配颜色，但你明白了：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

这应该这样做

body {
  background: #74D3FF;
  padding: 20px;
}

ul {
  display: block;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  border-radius: 10px;
  overflow: hidden;
}

ul li {
  display: block;
  width: 100%;
  height: 80px;
  background: #292B33;
  border-top: 3px solid #2C2F36;
  border-bottom: 3px solid #1E2128;
}

ul li:nth-child(odd) {
  background: #2C2F39;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

JSFiddle演示：https://jsfiddle.net/jgaegvnw/4/

Answer 3

这是一个简单的例子： HTML：

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

CSS：

.box{
    width: 300px;
    height: 100px;
}

.box:nth-child(odd){
    background-color: #34495E;
    border-bottom: 2px solid green;
    border-top: 2px solid red;
}

.box:nth-child(even){
    background-color: #67809F;
    border-top: 2px solid red;
    border-bottom: 2px solid green;
}

盒子颜色尽可能接近，边框颜色为红色和绿色，所以你可以看到它。

Answer 4

您需要使用border inset，请参阅小提琴：https://jsfiddle.net/DIRTY_SMITH/wfbkj5qs/

div {
  border-style: inset;
  border-bottom-color: #20242D;
  border-top-color: #363942;
  background-color: #383C47;
  border-left-style: none;
  border-right-style: none;
  width: 200px;
  height: 50px;
  }

Answer 5

 .table {
  background: #1e2129;
  width: 375px;
  border-radius:40 px; //this can be in px,%,em
  overflow:hidden; //or change the border radius of div's inside;

}
.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;
}

这是一个小提琴：https://jsfiddle.net/bsmL1kx7/9/

如何在CSS中完成这种边框效果？

5 个答案: