浙公网安备33032602100516如何利用css实现圆环效果
阅读 14509 · 发布日期 2020-08-24 11:45 · 温州优光网络科技有限公司|建站|APP小程序制作|做网站SEO推广优化
【摘要】
css实现圆环效果有多种方法，这里为大家分享五种方法：（推荐教程：CSS教程）首先我们来看一下实现效果：接下来为大家介绍方法：1、两个标签的嵌套
.element1{
width: 200px;
height: 200px;
backgr... 【温州小程序开发,温州微信公众号,平阳做网站,平阳网站建设公司,平阳小程序商城制作,昆阳万全做网站,鳌江水头小程序,萧江腾蛟微信公众号,山门顺溪南雁海西南麂凤卧麻步怀溪网络网店服务,政采云网店管理服务】...
（推荐教程：
CSS教程）首先我们来看一下实现效果：
接下来为大家介绍方法：
1、两个标签的嵌套
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 ;
}
（学习视频推荐：
css视频教程）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实现圆环效果的详细内容，更多请关注php中文网其它相关文章！
微信
分享相关标签：
css 圆环效果本文转载于：
csdn，如有侵犯，请联系a@php.cn删除
上一篇：
CSS如何清除浮动？3种方法介绍
下一篇：
没有了相关文章相关视频如何使用源生css3实现圆环加载进度条如何使用纯CSS实现一个圆环旋转错觉的动画效果（附...实现CSS圆环的5种方法(小结)CSS3线性渐变实现4圆环相连（代码实例）如何利用css实现圆环效果使用CSS3文本属性使用CSS3过渡属性使用CSS3动画属性
[做网站css教程]
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实现圆环效果的详细内容，更多请关注php中文网其它相关文章！
微信
分享相关标签：
css 圆环效果本文转载于：
csdn，如有侵犯，请联系a@php.cn删除
上一篇：
CSS如何清除浮动？3种方法介绍
下一篇：
没有了相关文章相关视频如何使用源生css3实现圆环加载进度条如何使用纯CSS实现一个圆环旋转错觉的动画效果（附...实现CSS圆环的5种方法(小结)CSS3线性渐变实现4圆环相连（代码实例）如何利用css实现圆环效果使用CSS3文本属性使用CSS3过渡属性使用CSS3动画属性
