CSS で「反転した」境界線半径を作成する方法: 包括的なガイド

「反転」境界線半径: 包括的なガイド

Web 開発の領域では、望ましい美的効果を実現するには、型破りなアプローチが必要になる場合があります。そのような課題の 1 つは、丸い角が突き出ているのではなく凹んでいるように見える「反転」境界半径の作成です。

ネイティブ CSS は反転を処理できますか?

残念ながら、ネイティブ CSS は、境界半径の反転に対する直接的な解決策を提供しません。 MDN に記載されているように、負の境界半径値は無効です。

代替ソリューション

1.外部ライブラリ:

サードパーティ ライブラリを使用すると、反転した境界線半径効果を作成するタスクを簡素化できます。一部のライブラリは画像を使用するなど、時代遅れの方法で問題に取り組んでいますが、新しいアプローチはより効率的な解決策を提供します。

2.純粋な CSS (実験的):

純粋な CSS を使用すると、賢い配置と背景のトリックを使用して、反転した境界線の半径効果をシミュレートすることができます。このアイデアは、メイン要素よりもわずかに小さい境界半径を持つ追加要素を作成し、それらをメイン要素の外側に戦略的に配置することです。これらの追加要素の背景色をページの背景に合わせて調整することで、凹んだ丸い角の効果が作成されます。

実装

純粋なコード スニペットは次のとおりです。反転ボーダー半径の CSS 実装:

<code class="css">#main {
  margin: 40px; /* Adjust margins for spacing */
  height: 100px;
  background-color: #004C80;
  position: relative;
  overflow: hidden; /* Prevent content from leaking out */
}

#main div {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%; /* Generous border-radius for the effect */
  background-color: #FFF;
}

.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }</code>

<code class="html"><div id="main">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom left"></div>
  <div class="bottom right"></div>
</div></code>

これらの追加要素のボーダー半径と位置を調整することで、必要に応じて反転ボーダー半径の効果を微調整できます。

以上がCSS で「反転した」境界線半径を作成する方法: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。