温州桃源乡如何利用css实现圆环效果
阅读 13688 · 发布日期 2020-08-24 11:45 · 温州优光网络科技有限公司|建站|APP小程序制作|做网站SEO推广优化
【摘要】
css实现圆环效果有多种方法,这里为大家分享五种方法:(推荐教程:CSS教程)首先我们来看一下实现效果:接下来为大家介绍方法:1、两个标签的嵌套
.element1{
width: 200px;
height: 200px;
backgr... 【温州小程序开发,温州微信公众号,平阳做网站,平阳网站建设公司,平阳小程序商城制作,昆阳万全做网站,鳌江水头小程序,萧江腾蛟微信公众号,山门顺溪南雁海西南麂凤卧麻步怀溪网络网店服务,政采云网店管理服务】...
css实现圆环效果有多种方法,这里为大家分享五种方法:
(推荐教程:
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动画属性