<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
/* 第一个骰子样式 */
.box{
width: 100px; height: 100px; border: 1px black solid; border-radius: 5px;
display: grid; grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);
place-items: center center;
}
.box div{
width: 20px; height: 20px; background: black; border-radius: 50%;
}
.box div:nth-child(1){grid-area: 2/2/3/3;}
/* 第二个骰子样式 */
.box1{
width: 100px; height: 100px; border: 1px black solid; border-radius: 5px;
display: grid; grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);
place-items: center center;
}
.box1 div{
width: 20px; height: 20px; background: black; border-radius: 50%;
}
.box1 div:nth-child(2){grid-area:3/3/4/4;}
/* 第三个骰子样式 */
.box2{
width: 100px; height: 100px; border: 1px black solid; border-radius: 5px;
display: grid; grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";
}
.box2 div{width: 20px; height: 20px; background: black; border-radius: 50%;}
.box2 div:nth-child(2){grid-area: a5;}
.box2 div:nth-child(3){grid-area: a9;}
/* 第四个骰子样式 */
.box3{
width: 100px; height: 100px; border: 1px black solid; border-radius: 5px;
display: grid; grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";
}
.box3 div{width: 20px; height: 20px; background: black; border-radius: 50%;}
.box3 div:nth-child(2){grid-area: a3;}
.box3 div:nth-child(3){grid-area: a7;}
.box3 div:nth-child(4){grid-area: a9;}
/* 第五个骰子样式 */
.box4{
width: 100px; height: 100px; border: 1px black solid; border-radius: 5px;
display: grid; grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";
}
.box4 div{width: 20px; height: 20px; background: black; border-radius: 50%;}
.box4 div:nth-child(2){grid-area: a3;}
.box4 div:nth-child(3){grid-area: a7;}
.box4 div:nth-child(4){grid-area: a9;}
.box4 div:nth-child(5){grid-area: a5;}
/* 第六个骰子样式 */
.box5{
width: 100px; height: 100px; border: 1px black solid; border-radius: 5px;
display: grid; grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";
}
.box5 div{width: 20px; height: 20px; background: black; border-radius: 50%;}
.box5 div:nth-child(2){grid-area: a3;}
.box5 div:nth-child(3){grid-area: a7;}
.box5 div:nth-child(4){grid-area: a9;}
.box5 div:nth-child(5){grid-area: a4;}
.box5 div:nth-child(6){grid-area: a6;}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
<div class="box1">
<div></div>
<div></div>
</div>
<div class="box2">
<div></div>
<div></div>
<div></div>
</div>
<div class="box3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box4">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box5">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
css3-grid制作骰子
最新推荐文章于 2022-08-02 21:47:19 发布