ホームページ > ウェブフロントエンド > フロントエンドQ&A > CSS3で丸い角を作成するために使用されるプロパティは何ですか

CSS3で丸い角を作成するために使用されるプロパティは何ですか

WBOY
リリース: 2022-03-16 11:25:47
オリジナル
3675 人が閲覧しました

CSS3 では、「border-radius」属性は丸い角を作成するために使用されます。この属性は、要素の 4 つの丸い角のスタイルを設定するために使用できる短縮属性です。構文は「border-半径: 1-4 長さ|% / 1-4 長さ|%」。

CSS3で丸い角を作成するために使用されるプロパティは何ですか

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 で丸い角を作成するために使用される属性

最初に、主に CSS3 属性 border-radius を使用して丸い効果を定義して、丸い境界線を設定します。具体的な構文は次のとおりです:

{ border-raidus : none | length | length ;} パラメータ none はデフォルト値であり、角丸効果がないことを意味します; パラメータ length は構成された長さの値です浮動小数点数とユニット識別子の値を負の値にすることはできません。

CSS3で丸い角を作成するために使用されるプロパティは何ですか

CSS3で丸い角を作成するために使用されるプロパティは何ですか

2 番目に、2 つの角の半径を指定します。 border-radius プロパティには 2 つのパラメータ値を含めることができます。最初のパラメータ値は丸い角の水平半径を表し、2 番目のパラメータ値は丸い角の垂直半径を表します。2 つのパラメータはスラッシュ (/) で区切られています。

CSS3で丸い角を作成するために使用されるプロパティは何ですか

CSS3で丸い角を作成するために使用されるプロパティは何ですか

3 番目に、4 つの異なる角を持つ丸い境界線を描きます。 border-radius は、4 つの異なる角を持つ丸い境界線を描画できます。具体的な構文は次のとおりです:

{ border-radius : top-left | top-right |bottom-right |bottom-left ;} パラメーターは次のとおりです。それぞれ、左上隅のフィレット半径、右上隅のフィレット半径、右下隅のフィレット半径、左下隅のフィレット半径を表します。

CSS3で丸い角を作成するために使用されるプロパティは何ですか

CSS3で丸い角を作成するために使用されるプロパティは何ですか

#4 番目に、円形の境界線を描きます。 border-radius プロパティは、さまざまな半径値に応じてさまざまな丸い境界線を描画したり、完全な円を描画したりすることもできます。

CSS3で丸い角を作成するために使用されるプロパティは何ですか

CSS3で丸い角を作成するために使用されるプロパティは何ですか

開発者は、独自のニーズに応じて境界半径のサイズを設定できます。

(学習ビデオ共有:

css ビデオ チュートリアル)

以上がCSS3で丸い角を作成するために使用されるプロパティは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート