html - 如何在不使边框线变圆的情况下获得 CSS 圆 Angular ？

Question

我正在使用 border-radius 来圆化一个 div 的 Angular 。我在 div 的底部也有一条边框线。像这样:

<div style="border-radius: .5em; border-bottom: 1px solid black">Content</div>

但是，我不希望边界线有圆边。我希望边界线完全笔直。有办法实现吗？

Answer 1

可以使用伪元素(::before)模拟直线边框

CSS

div{
    position: relative;
    border-radius: .5em;
    background: #ccc;
}

div:before{
    position: absolute;
    content: "";
    display:block;
    bottom:0;
    left:0;
    right:0;
    height: 1px;
    background: #000;

}

DEMO HERE