CSS のみを使用して長方形に円形の穴を作成するにはどうすればよいですか?

CSS を使用して長方形の中に円形の穴を切り取る

特定の視覚効果を追求する中で、多くの開発者は、特にそれを試みる際にマークアップと互換性の問題に直面します。 CSS を使用して長方形の中に円形の切り抜きを作成します。

これらの懸念に対処し、CSS テクニックの理解を高めるには、望ましい結果を達成するための別のアプローチを検討してみましょう。親要素の放射状グラデーションの背景と円形の切り抜きの疑似要素を利用することで、マークアップを簡素化し、IE 10/11 の 1px ギャップの問題を排除できます。

div:before {
  position: absolute;
  content: "";
  width: 90px;
  height: 90px;
  top: -75px;
  left: calc(50% - 45px);
  background-color: red;
  border-radius: 50%;
}

div {
  position: relative;
  margin: 100px auto 0 auto;
  width: 90%;
  height: 150px;
  border-radius: 6px;
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);
}

:before で表される要素は、赤い円形の切り抜きを定義します。これは、親 div 内で水平方向に絶対的に配置され、中央に配置され、達成しようとしている円形の穴を反映しています。 background-color および border-radius プロパティは、その視覚的な外観を設定します。

親 div は、カットアウトを含むように相対的に配置され、長方形の背景を提供します。境界線の半径は角を丸くして、切り抜きと長方形の間のスムーズな移行を作成します。

親 div の放射状グラデーションの背景は、透明なギャップと塗りつぶし効果を実現するために重要です。放射状のグラデーションは円の中心点 (50% -30px で 50px 50px) から始まり、外側に広がり、透明な黒から半透明の黒への柔らかい移行を作成します。グラデーションの半径を慎重に調整することで、長方形に円形の穴が開けられたような錯覚を生み出します。

このアプローチでは、複数の要素を使用する場合に比べてマークアップが簡単になり、IE 10/で発生した 1px のギャップの問題が解消されます。 11. CSS プロパティのみに依存して目的の視覚効果を実現し、保守性とブラウザ間の互換性を強化します。

以上がCSS のみを使用して長方形に円形の穴を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。