Draw concentric circles with html+css (concentric circles)--Absolute layout

First, CSS Draw circle

1  2  {3    width: 300px;  4   height: 300px;  5   background-color: #000000;  6   border-radius: 300px;  7 }

Key

1. Width = height is equivalent to drawing a square

2, Border-radius > 0.5*width (border-radius: Fillet radius)

Second, absolute form concentric circle

Draw the outer circle:

1 #exCircle {2    margin:auto;  3    width: 300px;  4    height: 300px;  5    border-radius: 300px;  6    background-colorGreen;  7 }

Key

1, Margin:auto the center of the circle display

2, the radius of the outer circle is 150px (WIDTH/2)

Draw a circle inside

1 #inCircle{2 Margin-top:50px;3 Margin-left:50px;4 position:Absolute;5 width:200px;6 Height:200px;7 Border-radius:150px;8 Background-color:Yellow;9}

Key

1, internal circle radius of 100px (WIDTH/2)

2, Position:absolute use absolute layout

3, margin-top:50px (external circle radius-Internal circle radius)

HTML code:

1  2 <div id= "Excircle" > 3     <div id= "incircle" >4    </div>5</div>

Third, the effect:

Iv. Knowledge Supplement

1. Border-radius: Reference 50724630

2, Position attribute, Relative/absolute distinguish, the online information is disorderly, recently after finishing to send an article

Report:

Full source

<!     DOCTYPE html>{margin:Auto;width:300px;Height:300px;Border-radius:150px;Background-color:Green;}#inCircle{Margin-top:50px;Margin-left:50px;position:Absolute;width:200px;Height:200px;Border-radius:100px;Background-color:Yellow;}</style>

Draw concentric circles with html+css (concentric circles)--Absolute layout