圆环5种方法。

Posted 2022-12-13 zhangyufeng0126

圆环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%;

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;

2. 使用伪元素，before／after

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

1. .element2

2. width: 200px;

3. height: 200px;

4. background-color: lightpink;

5. border-radius: 50%;

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;

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 ;

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;

<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;

 

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%);