3个单边的边框底部？

有没有办法创建3 border-bottom s到单个div？3个单边的边框底部？

这里是它需要看起来像：

enter image description here

2014-12-26 Rahul Desai

的完全跨浏览器的简单的解决方案是使用三个要素。奇特的CSS3解决方案应该使用box-shadow，它支持逗号分隔的列表，并且可以根据需要获取尽可能多的阴影。 – adeneo

没有评论downvote不赞赏。 –

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

来源

2014-12-26 09:49:17 Akshay

好现在可以应用三个阴影，边界是什么？ –

@NaveenKumarPG你可以做到这一点，但这是很多工作http://codepen.io/anon/pen/WbGzyr – Akshay

你可以尝试用双边框，边框半径和阴影接近这一点。

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

来源

2014-12-26 09:40:07 Mouser

你可以使用

border-bottom: 3px double #BBBBBB;"

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

border-bottom: 1px solid #BBBBBB;

来回三个货柜这种效果。为最后的div给出阴影效果。

来源

2014-12-26 09:45:33

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

来源

2014-12-26 09:46:33 Tushar

3个单边的边框底部？

回答

相关问题