Div の丸いアウトラインを作成するにはどうすればよいですか?

角を丸めた Div のアウトラインを作成できますか?

border-radius プロパティと同様に、div 要素に丸いアウトラインを与えることができます。 border-radius プロパティでうまくいくと思うかもしれませんが、より詳細な制御を提供する代替手段、b​​ox-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;
}

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