Box-Shadow を使用して Div 要素の丸いアウトラインを作成するにはどうすればよいですか?

ボックスシャドウを使用した Div 要素の丸いアウトラインの作成

div 要素のアウトラインの外観をカスタマイズすると、ユーザー エクスペリエンスと視覚的な美しさを向上させることができます。 box-shadow プロパティを使用することで、要素のアウトラインの border-radius の機能と同様の丸い角を実現できます。

この手法を説明するために、丸い境界線と希望を持つ入力フィールドがあるシナリオを考えてみましょう。フォーカスを受け取ったときにアウトラインの色を変更します。従来の正方形のアウトラインは魅力的ではない可能性があります。

解決策:

従来の方法を使用してアウトラインを丸くする代わりに、box-shadow プロパティを利用します。このソリューションは、よりスムーズでカスタマイズ可能な外観を提供します。ボックスシャドウの設定を微調整することで、丸みを帯びたアウトラインを厳密に模倣した疑似アウトラインを作成できます。

  input, input:focus {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
    outline-color: transparent; /* for high contrast modes */
    transition: .1s;
  }

  /* Smooth outline with box-shadow: */
  .text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
  }

  /* Hard "outline" with box-shadow: */
  .text2:focus {
    box-shadow: 0 0 0 2pt red;
  }

この例では、入力要素の境界線の半径は最初 2pt ですが、ボックス-shadow プロパティは、要素の周囲に 1pt の灰色の影を追加します。要素がフォーカスを受け取ると、ボックスの影が 3pt に増加し、コーンフラワーブルーの色になり、輪郭が滑らかになります。さらに、box-shadow を 0 0 0 2pt red に設定することで、より明確な輪郭を作成できます。

以上がBox-Shadow を使用して Div 要素の丸いアウトラインを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。