html - 您会使用什么 CSS 功能来显示二维网格上的高程？

Question

我正在尝试移植我在成长过程中玩过的绝版棋盘游戏，并且正在尝试确定在 2D 网格上显示的最佳图形方法。在现实生活中，每个棋盘格都有两种地形类型(森林/平原)，以及三种海拔等级之一。我目前正在使用颜色来表示地形类型。我要让广场的中心开放以展示游戏作品。二维显示 3D 高程的想法是什么？

我尝试使用边框粗细，但我的 CSS 无法用我创建板的方法来实现。我的技术失误是理解如何让边框显示......所以帮助解决这个问题将不胜感激。但我想要达到的真正最终状态是高度的二维表示。

示例 CSS/网格是 here .

.square {
    float:left;
    position: relative;
    width: 11%;
    padding-bottom: 11%; /* = width for a 1:1 aspect ratio */
    margin: .2%;
    background-color: #1E1E1E;
    overflow: hidden;
}
.content
{
    position:absolute;
    height:80%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}
.forest
{
    background-color: rgb(7, 90, 5);
}
.plains
{
    background-color: rgb(245, 238, 136);
}
.hill
{
    border-width: medium;
}
.mountain
{
    border-width: thick;
    border-color: red;
}
.ground
{
    border-width: thin;
}

<div class="square forest hill"></div>
        <div class="square plains mountain"></div>
        <div class="square plains ground"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>

Answer 1

要使方 block 具有简单的 3d 效果以模拟图层，我建议使用 box-shadow。

如果您使用多个图层(正如我认为您所说的游戏中有 3 个图层)，您可以自定义 box-shadow 以具有不同的颜色、大小等。如果您想阅读更多关于 box-shadow click here .

这是我应用于元素的代码:box-shadow: inset 0 0 20px #000000; 在 HTML/CSS 类 layers 下。

例如代码片段:

*注意:滚动到 CSS 部分的底部以添加上面带有注释的代码。

.square {
    float:left;
    position: relative;
    width: 11%;
    padding-bottom: 11%; /* = width for a 1:1 aspect ratio */
    margin: .2%;
    background-color: #1E1E1E;
    overflow: hidden;
}
.content
{
    position:absolute;
    height:80%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}
.forest
{
    background-color: rgb(7, 90, 5);
}
.plains
{
    background-color: rgb(245, 238, 136);
}
.hill
{
    border-width: medium;
}
.mountain
{
    border-width: thick;
    border-color: red;
}
.ground
{
    border-width: thin;
}

/* THIS IS FOR 3D LAYER EFFECT */
.layers {
  box-shadow: inset 0 0 20px #000000;
}

<div class="square forest hill layers"></div>
<div class="square forest hill"></div>
<div class="square plains mountain layers"></div>
<div class="square plains mountain"></div>