Div 要素のアウトラインの角を丸くすることはできますか?

Div 要素は丸いアウトラインの角に対応しますか?

Div 要素には、border-radius プロパティを通じて明示的に丸いアウトラインの角を持たせる機能がありません。この制限は、多くのブラウザでフォーカス可能な要素を囲むデフォルトの正方形のアウトラインに起因します。

代替解決策: ボックス シャドウを採用する

div の丸いアウトラインの角の効果をシミュレートするには要素については、box-shadow の利用を検討してください。特定の寸法のボックス シャドウを戦略的に適用することで、丸い輪郭の錯覚を作り出すことができます。

実装:

滑らかな輪郭を実現する方法の例を次に示します。 box-shadow を使用したアウトライン:

<input class="text1">

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

.text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
}

より強力な「アウトライン」効果を得るには、 box-shadow の寸法は次のとおりです:

.text2:focus {
    box-shadow: 0 0 0 2pt red;
}

以上がDiv 要素のアウトラインの角を丸くすることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。