ife-task 4:css実現円,半円,四分の一円の描き方

ifeタスク4では、4分の1円を描く場合、1つの円を描きoverflowなどと組み合わせて実現しますが、実際には半円や4分の1円を直接描くことができ、いくつかの属性を無視していました.円の描き方:まず対応する矩形を描き、border-radiusを使う

1.円を描く

{ width:100px; height:100px; border-radius:50px; }

2.方向の異なる4つの円を描く

.top
{ width: 100px; height: 50px; border-radius: 50px 50px 0 0; }
.right { height: 100px; width: 50px; border-radius: 0 50px 50px 0; }
.bottom { width: 100px; height: 50px; border-radius: 0 0 50px 50px; }
.left { width: 50px; height: 100px; border-radius: 50px 0 0 50px; }

3.四分の一円を描く方法：

{ width:50px; height:50px; border-radius:50px 0 0 0; }

4.いくつかの属性の説明

border-radius:50 px 0 0 0はborder-raduis属性を4つの属性に分けて設定することに等価で、1つの円を上左、上右、下右、下左の4つのborder-top-left-radius:border-top-right-radius:border-bottom-right-radius:border-bottom-left-radius: