Draw a concentric circle with CSS3

This time to bring you to draw a concentric circle with CSS3, with CSS3 draw a concentric circle of attention to what, the following is the actual case, together to see.

Basic ideas

First of all, you have to draw three round bar, how do the three circles overlap to a piece? This has to be controlled by-margin.

<p id= "Tongxin" >    <p id= ' t1 ' ></p>    <p id= "T2" ></p>    <p id= "T3" ></p ></p>

Css

        #t1 {            float:left;            width:150px;            height:150px;            Background:pink;            border-radius:75px;        }        #t2 {                float:left;            width:100px;            height:100px;            Margin-left:-125px;/*move to left 125px*/            margin-top:25px;/* move to bottom 25px*/            background:green;            border-radius:50px;        }        #t3 {            float:left;            width:50px;            height:50px;            Margin-left:-100px;/*move left 100px*/            margin-top:50px;            Background:yellow;            border-radius:25px;        }

Results

Code Analysis

How do you understand the above code? Like the margin-left:-125px in T2. margin-top:25px; Look at the picture below.

-125 means move 125px,25 to the left to move 25px down. Why is the left mobile 125px, this depends on your junior high school math how. The distance between the two centers. Large circle radius of 75px, Medium circle radius 50px. This means that the distance between the circle and the circle is 125px.

Moving vertically 25px is because the center distance of the vertical direction is 25px.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS selector use of the detailed

Specific tips for using CSS margin

Refine the style of a radio box, check box

Bottom-level rules for CSS precedence calculations