CSS で凹型の境界線半径を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS で凹型の境界線半径を作成するにはどうすればよいですか?

Susan Sarandon

リリース： 2024-11-02 16:07:29

オリジナル

623 人が閲覧しました

How Can You Create a Concave Border Radius with CSS?

凹面の境界線の半径: 放射状グラデーションによる錯覚

次の点を考慮すると、CSS だけで凹面の境界線の半径を実現するのは不可能な作業のように思えるかもしれません。負の境界半径値は効果をもたらしません。ただし、放射状グラデーションを使用する賢い回避策があります。

凹面の境界線の錯覚を作成するには、要素のエッジの周囲に配置された複数の放射状グラデーションを使用できます。以下に例を示します。

<code class="css">#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;
}</code>

ログイン後にコピー

放射状グラデーションを慎重に配置し、その半径を調整することで、提供された画像に示すように、凹型の境界線の効果を作成できます。放射状グラデーションのサポートはブラウザによって異なり、古いブラウザでは互換性を確保するために追加の構文が必要になる場合があることに注意することが重要です。

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