CSSで四分円を作る方法

CSS で四分円を作成する方法: 1. width 属性と height 属性を使用して、要素の幅と高さが等しくなるように設定します。2. border-radius 属性を使用して、要素の値を設定します。要素の角丸を幅と高さの値に設定し、他の 3 つの角丸の値は 0 で、構文は「border-radius: width or height value 0 0 0;」です。

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

CSS で円を作成する場合、border-radius 属性が思い浮かびます。

この属性は、幅と高さが等しい正方形の要素を円に変えることができます

p {
	width: 50px;
	height: 50px;
	background-color: #0000FF;
	border-radius: 50px;
}

<p></p>

ただし、場合によっては、完全な円が必要ではなく、その一部、四分円を使用して、これを行うにはどうすればよいですか?

引き続き border-radius 属性を使用して、要素の 1 つの丸い角の値を幅または高さの値に設定し、他の 3 つの丸い角の値を 0 に設定します。

border-radius: 50px 0 0 0;

border-radius: 0 50px 0 0;

border-radius: 0 0 50px 0;

border-radius: 0 0 0 50px;

（学習ビデオ共有: css ビデオ チュートリアル）

以上がCSSで四分円を作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。