Html+CSS 인스턴스: 5라운드 가운데 맞춤
1398 단어 Html+CSS
@charset "utf-8";
/* CSS Document */
*
{
margin:0;
padding:0;
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
position:absolute;
width:100px;
height:100px;
border:10px solid black;
border-radius:50%;
}
/* , ( ) */
.plat{
position:relative;
top:50%;
left:50%;
margin-left:-190px;
margin-top:-93px;
/*border:5px solid black;*/
height:186px;
width:380px;s
}
.circle1{
border-color:red;
left:0;
top:0;
}
.circle2{
border-color:green;
left:130px;
top:0;
z-index:3; /*z-index , */
}
.circle3{
border-color:yellow;
left:260px;
top:0;
z-index:4;
}
.circle4{
border-color:blue;
left:65px;
top:70px;
z-index:5;
}
.circle5{
border-color:purple;
left:195px;
top:70px;
z-index:6;
}