首页 > html+css >正文

弹性盒子案例-骰子

发布时间：2024-09-06 17:00 作者：一友画

一、1点骰子

案例1代码示例：

<style type="text/css">
.box{width: 100px;height: 100px;background: #E7E7E7;border: 1px solid #D7D7D7;border-radius: 6px;display: flex;justify-content: center;align-items: center;}
.box div{width: 15px;height: 15px;border-radius: 50%;background: #000;}
</style>
<div class="box"><div class="s1"> </div></div>

案例1

二、2点骰子

案例2代码示例：

<style type="text/css">
.box{width: 100px;height: 100px;background: #E7E7E7;border: 1px solid #D7D7D7;border-radius: 6px;display: flex;justify-content: space-around;align-items: center;}
.box div{width: 15px;height: 15px;border-radius: 50%;background: #000;}
</style>
<div class="box"><div class="s1"> </div><div class="s2"> </div></div>

案例2

三、3点骰子

案例3代码示例：

<style type="text/css">
.box{width: 100px;height: 100px;background: #E7E7E7;border: 1px solid #D7D7D7;border-radius: 6px;display: flex;flex-wrap: wrap;justify-content: space-evenly;padding: 13px 0;box-sizing: border-box;}
.box div{width: 15px;height: 15px;border-radius: 50%;background: #000;}
.box .s2{align-self: center;}
.box .s3{align-self: flex-end;}
</style>
<div class="box"><div class="s1"> </div><div class="s2"> </div><div class="s3"> </div></div>

案例3

四、4点骰子

案例4代码示例：

<style type="text/css">
.box{width: 100px;height: 100px;background: #E7E7E7;border: 1px solid #D7D7D7;border-radius: 6px;display: flex;justify-content: space-around;}
.box .col{display: flex;flex-direction: column;justify-content: space-around;}
.box .col div{width: 15px;height: 15px;border-radius: 50%;background: #000;}
</style>
<div class="box">
<div class="col">
<div class="s1"> </div><div class="s2"> </div>
</div>
<div class="col">
<div class="s3"> </div><div class="s4"> </div>
</div>
</div>

案例4

五、5点骰子

案例5代码示例：

<style type="text/css">
.box{width: 100px;height: 100px;background: #E7E7E7;border: 1px solid #D7D7D7;border-radius: 6px;display: flex;justify-content: space-around;padding: 0 13px;box-sizing: border-box;}
.box .col{display: flex;flex-direction: column;justify-content: space-around;}
.box .col div{width: 15px;height: 15px;border-radius: 50%;background: #000;}
</style>
<div class="box">
<div class="col">
<div class="s1"> </div><div class="s2"> </div>
</div>
<div class="col">
<div class="s3"> </div>
</div>
<div class="col">
<div class="s4"> </div><div class="s5"> </div>
</div>
</div>

案例5

六、6点骰子

案例6代码示例：

<style type="text/css">
.box{width: 100px;height: 100px;background: #E7E7E7;border: 1px solid #D7D7D7;border-radius: 6px;display: flex;justify-content: space-around;}
.box .col{display: flex;flex-direction: column;justify-content: space-around;}
.box .col div{width: 15px;height: 15px;border-radius: 50%;background: #000;}
</style>
<div class="box">
<div class="col">
<div class="s1"> </div><div class="s2"> </div><div class="s3"> </div>
</div>
<div class="col">
<div class="s4"> </div><div class="s5"> </div><div class="s6"> </div>
</div>
</div>

案例6

以上内容，在整理时难免有疏漏错误之处，如有发现，可以通过顶部的“联系站长”提出反馈，感谢您的支持！