如何在css中實現這種邊框效果？

Question

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

許多衛星現在我一直在試圖找出如何在CSS中的元素，特別是類似「簽名serveice」每個行項目之間的邊界圍繞以下邊框效果。 「臉譜監視器」等我可以實現這種看起來間距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>

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

她e是一個簡單的例子： 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

你將要使用的邊界插圖看到小提琴：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/

Answer 6

我希望這是足夠接近。試圖使插圖效果逼真，採用箱陰影和透明膠片：

.myList { 
 
    background: #1e2129; 
 
    width: 375px; 
 
    color: #fff; 
 
    font-family: helvetica; 
 
    text-align: center; 
 
    line-height: 100px; 
 
} 
 
.myList strong,.myList span {font-weight: 900;} 
 
.myList>* { 
 
    box-shadow: inset 0 1px 5px rgba(255,255,255,.05), inset 0 2px 2px rgba(255,255,255,0.07), inset 0 3px 1px rgba(255,255,255,.05); 
 
    position: relative; 
 
    opacity: .85; 
 
    
 
} 
 
.myList>*, .myList>*:after { 
 
    transition: opacity .3s cubic-bezier(0.55, 0, 0.55, 0.2); 
 
} 
 
.myList>*:hover { 
 
    opacity: 1; 
 
    cursor: pointer; 
 
} 
 
.myList>*:after { 
 
    position: absolute; 
 
    bottom: -1px; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 3px; 
 
    background-color: rgba(0,0,0,.12); 
 
    box-shadow: inset 0 1px 5px rgba(0,0,0,.1), inset 0 2px 2px rgba(0,0,0,0.07), inset 0 3px 1px rgba(0,0,0,.05); 
 
    content: ' '; 
 
    z-index: 1; 
 
    opacity: .85; 
 
    border-bottom: 1px solid rgba(0,0,0,.21); 
 
} 
 
.myList>*:hover:after{ 
 
    opacity: .85; 
 
} 
 
.myList>*:nth-child(odd) { 
 
    background: #272a34; 
 
} 
 
.myList>*:nth-child(even) { 
 
    background: #313641; 
 
}

<div class="myList"> 
 
    <div><strong>row</strong>one</div> 
 
    <div><strong>row</strong>two</div> 
 
    <div><strong>row</strong>three</div> 
 
    <div><strong>row</strong>four</div> 
 
    <div><strong>row</strong>five</div> 
 
    <div><strong>row</strong>six</div> 
 
    <div><strong>row</strong>SE<span style="color: #c33;">7</span>EN</div> 
 
    </div>

您可以進一步調整它here。