<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.wrapper{
position: absolute;
left: 30%;
top: 30%;
margin-left: -390px;
margin-top: -185px;
}
.circle{
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
}
/*蓝黑红黄绿*/
.blue1{
border:10px solid blue;
}
.blue2{
border:10px solid transparent;
border-right-color: blue;
z-index: 2;
}
.black1{
border:10px solid black;
left: 120px;
}
.black2{
border:10px solid transparent;
border-bottom-color: black;
border-right-color: black;
left: 120px;
z-index: 2;
}
.red1{
border:10px solid red;
left: 240px;
}
.red2{
border:10px solid transparent;
border-left-color: red;
left: 240px;
z-index: 2;
}
.yellow{
border:10px solid yellow;
left: 60px;
top:70px;
}
.green1{
border:10px solid green;
left: 180px;
top:70px;
}
.green2{
border:10px solid transparent;
border-left-color: green;
left: 180px;
top:70px;
z-index: 2;
}
</style>
</head>
<body>
<div class="wrapper">
<div class = "circle blue1"></div>
<div class = "circle blue2"></div>
<div class = "circle black1"></div>
<div class = "circle black2"></div>
<div class = "circle red1"></div>
<div class = "circle red2"></div>
<div class = "circle yellow"></div>
<div class = "circle green1"></div>
<div class = "circle green2"></div>
</div>
</body>
</html>
版权声明：本文为Magnrticda原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。