<!DOCTYPE html> <html> <head> <title>五环</title> <style type="text/css"> * { margin: 0; padding: 0; } .wrapper { width: 780px; height: 370px; position: absolute; left: 50%; top: 50%; margin-left: -390px; margin-top: -185px; } .circle { width: 200px; height: 200px; border-radius: 50%; position: absolute; } .blue { border: 20px solid blue; } .blue2 { border: 20px solid transparent; border-right-color: blue; z-index: 2; } .black { border: 20px solid black; left: 270px; } .black2 { border: 20px solid transparent; border-bottom-color: black; border-right-color: black; left: 270px; z-index: 2; } .red { border: 20px solid red; left: 540px; } .red2 { border: 20px solid transparent; border-left-color: red; left: 540px; z-index: 2; } .yellow { border: 20px solid yellow; left: 140px; top: 130px; } .green { border: 20px solid green; left: 410px; top: 130px; } .green2 { border: 20px solid transparent; border-left-color: green; left: 410px; top: 130px; z-index: 2; } </style> </head> <body> <div class="wrapper"> <div class="circle blue"></div> <div class="circle blue2"></div> <div class="circle black"></div> <div class="circle black2"></div> <div class="circle red"></div> <div class="circle red2"></div> <div class="circle yellow"></div> <div class="circle green"></div> <div class="circle green2"></div> </div> </body> </html>
CSS例子澳运五环练习
2023-08-29
58
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
目录
相关文章
|
5月前
|
前端开发
|
6月前
|
移动开发
前端开发
JavaScript
|
6月前
|
前端开发
程序员
|
6月前
|
前端开发
JavaScript
CSS基础详细解析(附带综合小练习)(1)
目标：掌握 CSS 属性基本写法，能够使用文字相关属性美化文章页。
01-CSS初体验
层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）。
55
0
0
|
前端开发
|
前端开发
|
前端开发
|
前端开发
|
3月前
|
前端开发