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

グラデーションを使用して凹面効果を作成する

CSS では、border-radius は要素のエッジに曲線を追加するための強力なツールです。ただし、曲線が外側に膨らむ凸状の境界線を作成する場合に限定されます。曲線が内側に落ち込む凹型の境界線が必要な場合はどうすればよいですか?

例: 凸型境界線

<code class="css">#test {
    width: 200px;
    height: 200px;
    background: #888888;
    border-radius: 50px;
}</code>

試行された解決策

凹型の境界線を作成するには、border-radius に負の値を使用してみてください。ただし、このアプローチは 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 は 2 つを作成します。放射状のグラデーションが重なって凹面のエッジを形成します。最初のグラデーションは、-20% の透明な円で始まり、100% の #888888 の実色に移行します。 2 番目のグラデーションも同様ですが、120% からです。

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