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

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>

この手法では 2 つの放射状グラデーションが作成されます。1 つは次の位置に配置されます。左端と右端です。グラデーションは透明から背景色まで徐々に薄くなり、内側に曲がった境界線のように見えます。

ブラウザの互換性に関する考慮事項

放射状グラデーションでは、古いバージョンとの互換性のためにベンダー プレフィックスが必要であることに注意することが重要です。ブラウザ。たとえば、Webkit ブラウザには次の接頭辞が必要です:

<code class="css">background:
  -webkit-radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
  -webkit-radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);</code>

放射状のグラデーションと慎重な配置を組み合わせることで、凹型の境界線の半径の印象を作り出し、Web デザインに立体感を加えることができます。

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