实现CSS圆环的5种方法(小结)css制作收缩圆环旋转效果实例代码css3 clip实现圆环进度条的示例代码图解CSS3制作圆环形进度条的实例教程CSS实现圆环旋转加载动画

 .element1{ width: 200px; height: 200px; background-color: lightpink; border-radius: 50%; } .child1{ width: 100px; height: 100px; border-radius: 50%; background-color: #009966; position: relative; top: 50px; left: 50px; }

 .element2{ width: 200px; height: 200px; background-color: lightpink; border-radius: 50%; } .element2:after{ content: ""; display: block; width: 100px; height: 100px; border-radius: 50%; background-color: #009966; position: relative; top: 50px; left: 50px; }

 .element3{ width: 100px; height: 100px; background-color: #009966; border-radius: 50%; border: 50px solid lightpink ; }

 .element4{ width: 100px; height: 100px; background-color: #009966; border-radius: 50%; box-shadow: 0 0 0 50px lightpink ; margin: auto; }

 .element5{ width: 200px; height: 200px; background-color: #009966; border-radius: 50%; box-shadow: 0 0 0 50px lightpink inset; margin: auto; }

 .element6{ width: 200px; height: 200px; border-radius: 50%; background: -webkit-radial-gradient( circle closest-side,#009966 50%,lightpink 50%); }