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

Div 要素の丸いアウトラインをシミュレートする

border-radius プロパティでは div 要素の境界線の角を丸めることができますが、丸い輪郭に対する解決策は提供されません。

ただし、 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;
}

この例では、box-shadow プロパティによって入力フィールドの周囲に微妙な影が作成されます。スプレッド半径をゼロに設定すると、影が要素の端に制限され、アウトラインのような効果が作成されます。

text1 クラスと text2 クラスは、スプレッド半径と色を変更することでアウトラインをさらにカスタマイズし、その結果、

この手法は、div 要素で丸みを帯びたアウトラインを実現するための柔軟でエレガントなソリューションを提供します。

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