CSS 圆形样式代码生成器：50 个彩色圆形

• 日期: 2024-11-01 09:20:56
• 标签: 常规

1. .gui {

2. display: flex;
   

3. flex-wrap: wrap;
   

4. justify-content: center;
   

5. align-items: center;
   

6. }
8. .gui .circle {

9. width: 50px;
   

10. height: 50px;
11. background-color: #000000;
12. border-radius: 50%;
13. margin: 10px; 14.}
15. .gui .circle:nth-child(1) {
16. background-color: #FF0000; 18.}
18. .gui .circle:nth-child(2) {
19. background-color: #FF7F00; 22.}
21. .gui .circle:nth-child(3) {
22. background-color: #FFFF00; 26.}
24. .gui .circle:nth-child(4) {
25. background-color: #00FF00; 30.}
27. .gui .circle:nth-child(5) {
28. background-color: #00FFFF; 34.}
30. .gui .circle:nth-child(6) {
31. background-color: #0000FF; 38.}
33. .gui .circle:nth-child(7) {
34. background-color: #8B00FF; 42.}
36. .gui .circle:nth-child(8) {
37. background-color: #FF00FF; 46.}
39. .gui .circle:nth-child(9) {
40. background-color: #FF1493; 50.}
42. .gui .circle:nth-child(10) {
43. background-color: #00FF7F; 54.}
45. .gui .circle:nth-child(11) {
46. background-color: #FFD700; 58.}
48. .gui .circle:nth-child(12) {
49. background-color: #808080; 62.}
51. .gui .circle:nth-child(13) {
52. background-color: #C0C0C0; 66.}
54. .gui .circle:nth-child(14) {
55. background-color: #FFFFFF; 70.}
57. .gui .circle:nth-child(15) {
58. background-color: #800000; 74.}
60. .gui .circle:nth-child(16) {
61. background-color: #8B4513; 78.}
63. .gui .circle:nth-child(17) {
64. background-color: #008000; 82.}
66. .gui .circle:nth-child(18) {
67. background-color: #808000; 86.}
69. .gui .circle:nth-child(19) {
70. background-color: #000080; 90.}
72. .gui .circle:nth-child(20) {
73. background-color: #800080; 94.}
75. .gui .circle:nth-child(21) {
76. background-color: #FFC0CB; 98.}
78. .gui .circle:nth-child(22) {
79. background-color: #808000; 102.}
81. .gui .circle:nth-child(23) {
82. background-color: #008080; 106.}
84. .gui .circle:nth-child(24) {
85. background-color: #FF69B4; 110.}
87. .gui .circle:nth-child(25) {
88. background-color: #CD5C5C; 114.}
90. .gui .circle:nth-child(26) {
91. background-color: #4B0082; 118.}
93. .gui .circle:nth-child(27) {
94. background-color: #FFE4C4; 122.}
96. .gui .circle:nth-child(28) {
97. background-color: #DC143C; 126.}
99. .gui .circle:nth-child(29) {
100. background-color: #00CED1; 130.}
102. .gui .circle:nth-child(30) {
103. background-color: #FFA07A; 134.}
105. .gui .circle:nth-child(31) {
106. background-color: #00FA9A; 138.}
108. .gui .circle:nth-child(32) {
109. background-color: #FFA500; 142.}
111. .gui .circle:nth-child(33) {
112. background-color: #DA70D6; 146.}
114. .gui .circle:nth-child(34) {
115. background-color: #EEE8AA; 150.}
117. .gui .circle:nth-child(35) {
118. background-color: #ADD8E6; 154.}
120. .gui .circle:nth-child(36) {
121. background-color: #F08080; 158.}
123. .gui .circle:nth-child(37) {
124. background-color: #FFB6C1; 162.}
126. .gui .circle:nth-child(38) {
127. background-color: #87CEFA; 166.}
129. .gui .circle:nth-child(39) {
130. background-color: #FA8072; 170.}
132. .gui .circle:nth-child(40) {
133. background-color: #20B2AA; 174.}
135. .gui .circle:nth-child(41) {
136. background-color: #FFC0CB; 178.}
138. .gui .circle:nth-child(42) {
139. background-color: #ADFF2F; 182.}
141. .gui .circle:nth-child(43) {
142. background-color: #FFDAB9; 186.}
144. .gui .circle:nth-child(44) {
145. background-color: #40E0D0; 190.}
147. .gui .circle:nth-child(45) {
148. background-color: #6B8E23; 194.}
150. .gui .circle:nth-child(46) {
151. background-color: #B0C4DE; 198.}
153. .gui .circle:nth-child(47) {
154. background-color: #BC8F8F; 202.}
156. .gui .circle:nth-child(48) {
157. background-color: #3CB371; 206.}
159. .gui .circle:nth-child(49) {
160. background-color: #FF6347; 210.}
162. .gui .circle:nth-child(50) {
163. background-color: #F5DEB3; 214.}

原文地址: https://www.cveoy.top/t/topic/mC1X 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录