Div の丸いアウトラインを作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-11-30 15:31:18

オリジナル

329 人が閲覧しました

How Can I Create Rounded Outlines for Divs?

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

border-radius プロパティと同様に、div 要素に丸いアウトラインを与えることができます。 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;
}

ログイン後にコピー

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