如何用CSS弹性布局创建始终保持正方形的骰子界面？-css教程-PHP中文网

如何用CSS弹性布局创建始终保持正方形的骰子界面？

聖光之護

发布： 2025-03-01 23:22:15

原创

257人浏览过

如何用css弹性布局创建始终保持正方形的骰子界面？

利用CSS弹性布局构建自适应正方形骰子界面

本文介绍如何使用CSS弹性布局(Flexbox)创建始终保持正方形的骰子界面，效果图如上所示。我们将通过HTML结构和CSS样式实现类似的视觉效果。

关键在于巧妙地结合Flexbox布局和比例控制。以下代码示例展示了如何构建这个骰子：

HTML结构：

立即学习“前端免费学习笔记（深入）”；

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

<div class="dice">
  @@##@@
  <ul class="dice-spots">
    <li class="spot active"></li>
    <li class="spot"></li>
    <li class="spot"></li>
    <li class="spot"></li>
    <li class="spot active"></li>
    <li class="spot"></li>
    <li class="spot"></li>
    <li class="spot"></li>
    <li class="spot active"></li>
  </ul>
</div>

登录后复制

这段HTML使用一个div作为容器，包含一个阴影图片(img)和一个无序列表(ul)来表示骰子点。li元素代表每个点，active类用于高亮显示。

对应的CSS样式：

.dice {
  max-width: 500px;
  width: 100%;
  border: 1px solid #000;
  margin: auto;
  position: relative;
  border-radius: 10px;
  aspect-ratio: 1 / 1; /* 保持正方形 */
  overflow: hidden; /* 隐藏超出部分 */

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 图片填充容器 */
  }

  .dice-spots {
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    padding: 10%; /* 调整点与边框的距离 */
    box-sizing: border-box; /* 包含内边距 */

    .spot {
      width: 25%;
      height: 25%;
      background-color: skyblue;
      border-radius: 50%; /* 圆形点 */
    }
    .spot.active {
      background-color: darkblue; /* 改变选中点的颜色 */
    }
  }
}

登录后复制

这段CSS利用aspect-ratio: 1 / 1;属性确保容器始终保持正方形。Flexbox布局使点均匀分布。width和height设置为百分比，保证响应式布局。border-radius创建圆角骰子。背景图片作为底图，位于点元素下方。通过绝对定位和百分比大小，保证骰子在不同尺寸下都能保持正方形。

通过以上HTML和CSS，即可创建一个响应式正方形骰子界面。注意，padding和box-sizing的配合使用，保证了骰子点与边框的距离在不同屏幕尺寸下保持一致。