网站开发栏目,介绍前端、后台、服务器、数据库、建站工具等实用网站开发教程。
今天，帝国模板之家小编发现一个很有趣的代码，使用css3绘制了一个八卦图，代码非常简洁：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title</title>
<style>
*{
margin: 0;
padding: 0;
}
#container{
width: 48px;
height: 96px;
background: #fff;
border-color: #000;
border-style: solid;
border-width: 2px 50px 2px 2px;
border-radius: 50%;
position: relative;
}
#top,#bottom{
width: 12px;
height: 12px;
position: absolute;
left: 50%;
}
#top{
border: 18px solid #000;
border-radius: 50%;
background: #fff;
}
#bottom{
top: 50%;
border: 18px solid #fff;
background: #000;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="container">
<div id="top"></div>
<div id="bottom"></div>
</div>
</body>
</html>
效果图如下：
以上就是css3绘制一个八卦图的代码，更多相关内容请关注帝国模板之家其他文章。
转载请注明来源：css3绘制一个八卦图
本文永久链接地址：https://www.moyouyouw.cn/code/410.html
郑重声明：本站所有主题/文章除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！我们不承担任何技术及版权问题，且不对任何资源负法律责任。
上一篇
下一篇
售价： 400 10 ℃ 0 评论
售价： 300 24 ℃ 0 评论
售价： 300 10 ℃ 0 评论
已有 位小伙伴发表了看法
欢迎 你 发表评论