您现在的位置是：网站首页> 编程资料编程资料

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

2021-09-04 873人已围观

简介 这篇文章主要介绍了实现CSS圆环的5种方法(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

想到去年面试实习的时候被问到实习圆环的问题，特意写篇文章总结一下吧！总结了一下大概有5种方法。


 

1. 两个标签的嵌套：

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

2. 使用伪元素，before／after

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

3. 使用border:

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

4. 使用border-shadow

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

5. 使用radial-gradient

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

如果大家有其他的方法，请告诉我吧，谢谢！！！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：纯css实现漂亮又健壮的tooltip的方法 div+css样式自制带小三角的tooltips效果CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)纯CSS3实现自定义Tooltip边框涂鸦风格的教程用简单的jquery+CSS创建自定义的a标签title提示tooltip关于CSS Tooltips(鼠标经过时显示)的效果怎么用纯CSS制作带小三角的tooltip提示框

下一篇：css将两个元素水平对齐的方法(兼容IE8)CSS水平对齐示例介绍CSS教程:水平对齐(text-align)-CSS教程-网页制作-网页教学网

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网