3個單邊的邊框底部？

Question

有沒有辦法創建3 border-bottom s到單個div？

這裏是它需要看起來像：

Answer 1

試試這個http://codepen.io/anon/pen/ogzoQQ

<div id="box"></div> 

#box{ 
width:100px; 
height:100px; 
background:blue; 
box-shadow: 0px 3px green,0px 6px orange,0px 9px yellow; 
border-radius:5px; 
} 

Answer 2

你可以嘗試用雙邊框，邊框半徑和陰影接近這一點。

.class { 
    border-radius: 5px 5px 5px 5px; 
    border-bottom: 3px double #BBBBBB; 
    box-shadow: 0px 3px 3px rgba(187,187,187, 1); 
} 

Answer 3

你可以使用

border-bottom: 3px double #BBBBBB;" 

，如果你想三行你需要使用三種不同的div

border-bottom: 1px solid #BBBBBB; 

來回三個貨櫃這種效果。爲最後的div給出陰影效果。

Answer 4

This是實現上述輸出的一種方法。

HTML

<div class="borderBox"> 
    <div class="innerCnt"> 
    <ul> 
     <li>Lorem Ipsum</li> 
     <li>Lorem Ipsum</li> 
     <li>Lorem Ipsum</li> 
     <li>Lorem Ipsum</li> 
    </ul> 
    </div> 
</div> 

CSS

.innerCnt { 
    background: #fff; 
    position: relative; 
    z-index: 1; 
    border-radius: 5px; 
} 
.innerCnt ul { 
    margin: 0 
} 
.borderBox { 
    height: 100px; 
    border: 1px solid #ccc; 
    border-radius: 8px; 
    position: relative; 
} 
.borderBox:after, 
.borderBox:before { 
    border: 1px solid #ccc; 
    content: " "; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 1px; 
    border-radius: 8px; 
} 
.borderBox:after { 
    top: 3px; 
    border-radius: 7px; 
}