CSS は凹型の境界線半径を作成できますか?

凹型境界線半径: CSS で可能ですか?

CSS では、border-radius プロパティを使用して丸い角を作成できます。ただし、デフォルトの効果は凸面であり、角が外側に丸くなっています。角が内側に丸くなった凹型の境界線の半径を実現することは可能ですか?

純粋な CSS では直接不可能ですが、背景のグラデーションを使用して凹型の境界線の半径の効果をシミュレートできます。仕組みは次のとおりです:

1. 目的の凹面形状をシミュレートする 2 つの放射状グラデーションを作成します。
2. これらのグラデーションを配置して繰り返し、目的の領域をカバーします。

例:

#test {
    width: 200px;
    height: 200px;
    background: #888888;
    background:
      radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
      radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);
    background-size:100px 200px, 100px 200px;
    background-position:0 0,100% 0;
    background-repeat:no-repeat;
}

このコードは、要素の背景色で始まり、背景色で終わる 2 つの放射状グラデーションをオーバーレイすることによって、凹型の境界線の半径を設定します。グラデーションの開始点は、要素の幅のそれぞれ -20% と 120% に配置され、凹面効果を作成します。

この手法はすべてのブラウザでサポートされているわけではないことに注意してください。そのため、ブラウザの互換性は運用環境に実装する場合は考慮する必要があります。

以上がCSS は凹型の境界線半径を作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。