CSS で逆の丸い角を実現するにはどうすればよいですか? （コード）

この記事の内容は、CSS で逆の角丸を実現する方法についてです。 （コード）、それは特定の参考値を必要としている友人がそれを参照できることを願っています。

Principle

親要素relative、子要素absolute、そしてtop、を渡します。 left、right、bottom を使用して、特定の表示位置を設定します。

DOM 構造

<div>
    <div></div>
</div>

CSS スタイル

.wrapper-dashed{
    position: relative;
    height: 1px;
    width: 100%;
}
/*虚线实现*/
.dashed {
    border-top: 1px dashed #cccccc;
    height: 1px;
    overflow: hidden;
}
.dashed:before, .dashed:after{
    display: block;
    position: absolute;
    content: "";
    width:10px;
    height:10px;
    background-color:#f3f5f9;
    border-radius:50%;
    top: -5px;
}
.dashed:before{
    left: -5px;
}
.dashed:after{
    right: -5px;
}

レンダリング

# ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

以上がCSS で逆の丸い角を実現するにはどうすればよいですか? （コード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。