实现实现CSS圆环的圆环的5种方法种方法(小结小结)
主要介绍了实现CSS圆环的5种方法(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟
随小编过来看看吧
想到去年面试实习的时候被问到实习圆环的问题，特意写篇文章总结一下吧！总结了一下大概有5种方法。
1. 两个标签的嵌套：
<div class="element1">
<div class="child1"></div>
</div>
.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
<div class="element2"></div>
.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;
weixin_38606202
- 粉丝: 1
- 资源: 951
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- BSC关键绩效财务与客户指标详解
- 绘制企业战略地图：从财务到客户价值的六步法
- BSC关键绩效指标详解：财务与运营效率评估
- 手持移动数据终端：常见问题与WIFI设置指南
- 平衡计分卡（BSC）：绩效管理与战略实施工具
- ESP8266智能家居控制系统设计与实现
- ESP8266在智能家居中的应用——网络家电控制系统
- BSC：平衡计分卡在绩效管理与信息技术中的应用
- 手持移动数据终端：常见问题与解决办法
- BSC模板：四大领域关键绩效指标详解(财务、客户、运营与成长)
- BSC：从绩效考核到计算机网络的关键概念
- BSC模板：四大维度关键绩效指标详解与预算达成分析
- 平衡计分卡（BSC）：绩效考核与战略实施工具
- K-means聚类算法详解及其优缺点
- 平衡计分卡（BSC）：从绩效考核到战略实施
- BSC：平衡计分卡与计算机网络中的应用
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
