圆环5种方法。

圆环5种方法。

1. 两个标签的嵌套：

1. <div class="element1">

2.     <div class="child1"></div>

3. </div>

1. .element1{

2. width: 200px;

3. height: 200px;

4. background-color: lightpink;

5. border-radius: 50%;

6. }

7. .child1{

8. width: 100px;

9. height: 100px;

10. border-radius: 50%;

11. background-color: #009966;

12. position: relative;

13. top: 50px;

14. left: 50px;

15. }

2. 使用伪元素，before／after

<div class="element2"></div>

1. .element2{

2. width: 200px;

3. height: 200px;

4. background-color: lightpink;

5. border-radius: 50%;

6. }

7. .element2:after{

8. content: "";

9. display: block;

10. width: 100px;

11. height: 100px;

12. border-radius: 50%;

13. background-color: #009966;

14. position: relative;

15. top: 50px;

16. left: 50px;

17. }

3. 使用border:

<div class="element3"></div>

1. .element3{

2. width: 100px;

3. height: 100px;

4. background-color: #009966;

5. border-radius: 50%;

6. border: 50px solid lightpink ;

7. }

4. 使用border-shadow

<div class="element4"></div>

1. .element4{

2. width: 100px;

3. height: 100px;

4. background-color: #009966;

5. border-radius: 50%;

6. box-shadow: 0 0 0 50px lightpink ;

7. margin: auto;

8. }

<div class="element5">

1. .element5{

2. width: 200px;

3. height: 200px;

4. background-color: #009966;

5. border-radius: 50%;

6. box-shadow: 0 0 0 50px lightpink inset;

7. margin: auto;

8. }

 

5. 使用radial-gradient

<div class="element6"></div>

1. .element6{

2. width: 200px;

3. height: 200px;

4. border-radius: 50%;

5. background: -webkit-radial-gradient( circle closest-side,#009966 50%,lightpink 50%);

6. }